Menu
Hi!
I am trying to make a function that will zoom a image(of a map). What I want is a drop-down menu with the diffrent zoom factors that the user can select from, and when they select it it will pass a value to the function and the function will zoom it in or out depending on what the user selects(ex: 1 = 1x, 2 = 2x, 4 = 4x, etc.).
I am not asking that anybody does this for me, infact I would rather do it myself so I learn something in the process. [i]But
Thanks for any and all help!
~ACA?
[i]Originally posted by Vladdy [/i]
[B]How about this for inspiration:
http://www.vladdy.net/Demos/ImageAdjustments.html [/B][/QUOTE]
[i]Originally posted by Paul Jr [/i]
[B]Hey, that's really cool -- but the controls are [i]backwards![/i] :eek: [/B][/QUOTE]
[i]Originally posted by Vladdy [/i]
[B]Depends what you move: image or viewport... :p [/B][/QUOTE]
[code=php]
/*this is a array that contains the zoom powers that the user can select from a drop down list on the map*/
var zoomList = new Array(5)
zoomList[1] = 1 // 1 = 1x etc.
zoomList[2] = 2
zoomList[3] = 3
zoomList[4] = 4
zoomList[5] = 5
/*selectedZoom is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(selectedZoom) {
/*this for "loop" looks through the zoomList array untill it maches the selectedZoom*/
for (var i = 0; i < zoomList.length; i++) {
if (zoomList[i] == selectedZoom) {
break
}
}
if (zoomList[i] == 1) {
document.mapPic.style.zoom = "1.0"
}
if (zoomList[i] == 2) {
document.mapPic.style.zoom = "2.0"
}
if (zoomList[i] == 3) {
document.mapPic.style.zoom = "3.0"
}
if (zoomList[i] == 4) {
document.mapPic.style.zoom = "4.0"
}
if (zoomList[i] == 5) {
document.mapPic.style.zoom = "5.0"
}
}
[/code][code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zooming an Image With a Function</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/JavaScript" src="myZoomingFunction.js" ></script>
<link rel="stylesheet" type="text/css" src="basic.css" />
</head>
<body>
<form name="zoomForm">
<p>Please select <em>zoom power</em> to zoom in map:
<select name="pickZoom" onSelect="zoomMap(document.zoomForm.pickZoom.value)">
<option value="1">x1</option>
<option value="2">x2</option>
<option value="3">x3</option>
<option value="4">x4</option>
<option value="5">x5</option>
</select>
</form>
<img src="map.gif" name="mapPic" />
</body>
</html>
[/code][code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zooming an Image With a Function</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script language="javascript/text">
<!--
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) {
document.mapPic.style.zoom = zoomFactor
}
//-->
</script>
<body>
<form name="zoomForm">
<input type="button" name="zoom" value="Zoom" onClick="zoomMap(2.0)" />
</form>
<img src="globetrotter/map.gif" name="mapPic" />
</body>
</html>
[/code]<i>
</i><script language="javascript/text">
Also, one last thing, is you've got the <script ... > </script> block after the closing <head> tag, but before the beginning <body> tag. Generally, the <script ... > </script> tags would go inside the <head> </head> block.
[/quote]
[i]Originally posted by AnacondaAndy [/i]
[B]I can't believe I did that!:rolleyes: lol..
And thanks for finding the error!
~ACA? [/B][/QUOTE]
You're welcome!
And, like Steelersfan88 said, thanks for making your code readable.
[/quote]
[i]Originally posted by AnacondaAndy [/i]
[B]ah, I am glad you like it...I am a perfectionest when it come to coding...if it does not look just right it is no good to me because I spend 2hrs(not quite ?) looking for stuff that should only take 30secs to find [/B][/QUOTE]
(as shown in this thread) [/quote]
[i]Originally posted by AnacondaAndy [/i]
[B]Heres one now, it does not work in mozilla or mozilla firefox for me, any idea what is wrong??[/B][/QUOTE]
[i]Originally posted by samij586 [/i]
[B]perhaps its just me, but I can't find the zoom property in the css doc's,http://www.w3.org/TR/REC-CSS2/propidx.html [/B][/QUOTE]
[i]Fromhttp://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zoom.asp [/i]
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample...
...This property is a Microsoft extension to Cascading Style Sheets (CSS)
[/quote]
[i]Originally posted by samij586 [/i]
[B]a ha! found it! but not on w3, it is in fact IE proprietery: [/B][/QUOTE]
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zooming an Image With a Function</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.imgD{
width: 665px;
height:403px;
overflow:hidden;
display:inline;
position:absolute;
}
#mapPic{
position:absolute;
left:0px;
top:0px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var w=665
var h=403
var img;
var left='0px';
var top='0px';
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) {
img=document.getElementById('mapPic').style;
img.left = left;
img.top = top;
img.width = w*zoomFactor+'px';
img.height = h*zoomFactor+'px';
}
var moveIt;
function moveL(){
if (parseInt(img.width)>665&&Math.abs(parseInt(img.left))+665<parseInt(img.width)){
img.left=parseInt(img.left)-3+'px';
moveIt=setTimeout("moveL()",1);
}
}
function moveR(){
if (parseInt(img.width)>665&&(parseInt(img.width)-parseInt(img.left)>=parseInt(img.width))){
img.left=parseInt(img.left)+3+'px';
moveIt=setTimeout("moveR()",1);
}
}
function moveU(){
if (parseInt(img.height)>403&&Math.abs(parseInt(img.top))+403<parseInt(img.height)){
img.top=parseInt(img.top)-3+'px';
moveIt=setTimeout("moveU()",1);
}
}
function moveD(){
if (parseInt(img.height)>403&&(parseInt(img.height)-parseInt(img.top)>=parseInt(img.height))){
img.top=parseInt(img.top)+3+'px';
moveIt=setTimeout("moveD()",1);
}
}
function stop(){
clearTimeout(moveIt);
}
//-->
</script>
</head>
<body>
<form name="zoomForm">
<input type="button" name="zoom" value="Zoom 2x" onClick="zoomMap(2)" />
<input type="button" name="zoom" value="Zoom 3x" onClick="zoomMap(3)" />
<input type="button" name="left" value="move left" onmouseout="stop();" onmouseover="moveL()" />
<input type="button" name="right" value="move right" onmouseout="stop();" onmouseover="moveR()" />
<input type="button" name="up" value="move up" onmouseout="stop();" onmouseover="moveU()" />
<input type="button" name="down" value="move down" onmouseout="stop();" onmouseover="moveD()" />
</form>
<span id="imgDiv" class="imgD">
<img src="map.gif" id="mapPic">
</span>
</body>
</html>
[/code][code=php]
function zoomMap(zoomFactor) {
mapPic = document.getElementById('mapPic').style;
mapPic.left = left;
mapPic.top = top;
mapPic.width = width * zoomFactor + 'px';
mapPic.height = height * zoomFactor + 'px';
}
[/code]<i>
</i><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zooming an Image With a Function</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.imgD
{
width: 665px;
height:403px;
overflow:hidden;
display:inline;
position:absolute;
}
#mapPic
{
position:absolute;
left:0px;
top:0px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var width=665
var height=403
var mapPic;
var left='0px';
var top='0px';
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) { <br/>
mapPic = document.getElementById('mapPic').style;
mapPic.left = left;
mapPic.top = top;
mapPic.width = width * zoomFactor + 'px';
mapPic.height = height * zoomFactor + 'px';
}
var moveIt;
function moveLeft(){
if (parseInt(mapPic.width) > 665 && Math.abs(parseInt(mapPic.left)) + 665 < parseInt(mapPic.width)) {
mapPic.left = parseInt(mapPic.left) - 3 + 'px';
moveIt = setTimeout("moveLeft()", 1);
}
}
/*moves the image to the right*/
function moveRight() {
if (parseInt(mapPic.width) > 665 && (parseInt(mapPic.width) - parseInt(mapPic.left) >= parseInt(mapPic.width))) {
mapPic.left = parseInt(mapPic.left) + 3 + 'px';
moveIt = setTimeout("moveRight()", 1);
}
}
/*moves the image up*/
function moveUp() {
if (parseInt(mapPic.height) > 403 && Math.abs(parseInt(mapPic.top)) + 403 < parseInt(mapPic.height)) {
mapPic.top = parseInt(mapPic.top) - 3 + 'px';
moveIt = setTimeout("moveUp()", 1);
}
}
/*moves the image down*/
function moveDown() {
if (parseInt(mapPic.height) > 403 && (parseInt(mapPic.height) - parseInt(mapPic.top) >= parseInt(mapPic.height))) {
mapPic.top = parseInt(mapPic.top) + 3 + 'px';
moveIt = setTimeout("moveDown()", 1);
}
}
/*stops the scrolling across the image when the mouse moves off the image*/
function stopScroll() {
clearTimeout(moveIt);
}
//-->
</script>
</head>
<body>
<form name="zoomForm">
<input type="button" name="zoom" value="Zoom 2x" onClick="zoomMap(2)" />
<input type="button" name="zoom" value="Zoom 3x" onClick="zoomMap(3)" />
<input type="button" name="left" value="move left" onmouseout="stopScroll();" onmouseover="moveLeft()" />
<input type="button" name="right" value="move right" onmouseout="stopScroll();" onmouseover="moveRight()" />
<input type="button" name="up" value="move up" onmouseout="stopScroll();" onmouseover="moveUp()" />
<input type="button" name="down" value="move down" onmouseout="stopScroll();" onmouseover="moveDown()" />
</form>
<span id="imgDiv" class="imgD">
<img src="globetrotter/map.gif" id="mapPic">
</span>
</body>
</html>
[code=php]if(theNum < 0) {
theNum *= -1 // multiply by negative 1
}[/code](Note my edit Pit)Pit can help you, but a little explanation wouldn't hurt. [/QUOTE]
[i]Originally emailed by Dave Clark[/I]
I was not even reprimanded by the administration for any of my actions. None of my super-moderator powers were taken from me until one member of the administration got upset because I used my super-moderator powers to mass-delete about 5,000 of my posts (i.e., from all forums except the ASP forum). At that point, he reduced my powers to just an ordinary moderator. I resented that (since I had done nothing to deserve such treatment -- even ordinary members have the power to delete their own posts), so I proceeded to manually delete all of my remaining posts one-by-one. That is when I left.
I harbor no ill feelings toward the forums or the administrators. I wish that everyone there will find the assistance they need. But, I will not return. I just can't sit idly by and watch one member castigating another member without provocation. Yes, I used to castigate certain members up one side and down the other (and not just on my own behalf) -- but that was always after provocation. I'm sure that such treatment of others continues. At least, without me there, it is a little quieter (I hope). ;-)[/QUOTE]Just thought I'd post that since somehow I took us sooooo offtrack.
[code=php]
x_coordinate_of_icon = x_coordinate_of_icon * zoom_factor
y_coordinate_of_icon = y_coordinate_of_icon * zoom_factor
[/code][i]Originally posted by steelersfan88 [/i]
[B]i would have no clue going about this (sorry for letting you down guys .... and for talking to pit on your thread). i would not even know where to get started.(except for readin thru this thread over and over) [/B][/QUOTE]
[code=php]
<style type="text/css">
<!--
.imgD
{
width: 665px;
height:403px;
overflow:hidden;
display:inline;
position:absolute;
}
#mapPic
{
position:absolute;
left:0px;
top:0px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var width=665
var height=403
var mapPic;
var left='0px';
var top='0px';
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) {
mapPic = document.getElementById('mapPic').style;
mapPic.left = left;
mapPic.top = top;
mapPic.width = width * zoomFactor + 'px';
mapPic.height = height * zoomFactor + 'px';
}
//-->
</script>
</head>
<body>
<form name="zoomForm">
<input type="button" name="zoom" value="Zoom Map" onClick="zoomMap(2)" />
<input type="button" name="reset" value="Reset" onClick="zoomMap(1)" />
</form>
<span id="imgDiv" class="imgD">
<img src="globetrotter/map.gif" id="mapPic">
</span>
[/code]
I was wondering, what else you might this zoom stuff to be able to. Example: I have already added some stuff to enable the user to click the image somewhere and the image will be zoomed with the clicked coordinate beeing centered.
[/quote]
[i]Originally posted by AnacondaAndy [/i]
[B]Every time, and the function curently only has one zoom factor. But you may be right, Thanks! Sorry, I forgot to post the code?
I am not going to post the whole document...
[code=php][/B][/QUOTE]
<style type="text/css">
<!--
.imgD
{
width: 665px;
height:403px;
overflow:hidden;
display:inline;
position:absolute;
}
#mapPic
{
position:absolute;
left:0px;
top:0px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var width=665
var height=403
var mapPic;
var left='0px';
var top='0px';
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) {
mapPic = document.getElementById('mapPic').style;
mapPic.left = left;
mapPic.top = top;
mapPic.width = width * zoomFactor + 'px';
mapPic.height = height * zoomFactor + 'px';
}
//-->
</script>
</head>
<body>
<form name="zoomForm">
<input type="button" name="zoom" value="Zoom Map" onClick="zoomMap(2)" />
<input type="button" name="reset" value="Reset" onClick="zoomMap(1)" />
</form>
<span id="imgDiv" class="imgD">
<img src="globetrotter/map.gif" id="mapPic">
</span>
[/code]
[code=php]
<script language="JavaScript" type="text/javascript">
<!--
var picwidth=665
var picheight=403
var picleft='0px';
var pixtop='0px';
/*zoomFactor is the integer passed to the function signifying the zoom power that the user selects*/
function zoomMap(zoomFactor) {
zoomFactor=parseInt(zoomFactor); //perhaps this is what is slowing opera down (it can't figure out what type of data zoomFactor is)
with(document.getElementById('mapPic').style)
{
left= picleft;
top = pictop;
width = picwidth * zoomFactor + 'px';
height = picheight * zoomFactor + 'px';
}
//-->
</script>
[/code]
Btw - can you imagine that I reduced the file size of this globetrotter page by 80 kilobytes only removing unnecessary spaces?
[/quote]
As to the people shifting aspect, I would suggest breaking the map into regions on the first zoom, and only draw that region, that way you don't have to worry about as many people[/quote]
0.1.9 — BETA 5.5