...
PDA

Image enlarge script - Buggy

danielwarner
05-09-2007, 07:50 PM
To begin with, im a novice at this so the code probably can be more efficient or what ever but below is just what i have knocked out. The script is ment to enlarge the image by making the style width wider and the border smaller onmouseover and the same onmouseout (although i got stuck before managing to make the shrink function).

The code has a bug it in somewhere which is annoying me! The code isnt large so im assuming it should be easy to spot. I have run a few tests, the while works, the enlarge function works althogh the script doesnt process. I think it may have something to do with the setTimeOut and the input of the id's into the function. (i tried a few experiments and i dont think the '1','2'...etc have passed into the function.

Anyway, if anyone can help me then it would be much appreciated :thumbsup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#images {
background-color:#ccc;
padding:6px 3px;
text-align:center;
}
#images img {
width:120px;
height:120px;
border:8px solid white;
margin:0 3px;
}
</style>
<script type="text/javascript">
<!--Begin

function expand(imageID){

var width=120
var height=120
max=8
i=0

while(i<=max){
i++
max--
width++
height++
function change(){
document.getElementById('img-1').style.width=width+"px"
document.getElementById('img-1').style.height=height+"px"
document.getElementById('img-1').style.border=max+"px solid white"
}
var t=setTimeout("change()")",500)
}

}
//END-->
</script>
</head>
<body>
<div id="images">

<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-1" onmouseover="expand('1')" onmouseout="shrink(1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-2" onmouseover="expand('2')" onmouseout="shrink(2)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-3" onmouseover="expand('3')" onmouseout="shrink(3)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-4" onmouseover="expand('4')" onmouseout="shrink(4)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-5" onmouseover="expand('5')" onmouseout="shrink(5)"/>

</div>

<div id="text"></div>

</body>
</html>

This code should run straight off if you want to test it.
cyberlogi
05-09-2007, 11:22 PM
This will work. You should also run your code through jslint before posting it here. Most of your statements were not terminated and several variables were declared implicitly (i have fixed this). Both are bad practices and will get you into trouble as your applications grow.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#images {
background-color:#ccc;
padding:6px 3px;
text-align:center;
}
#images img {
width:120px;
height:120px;
border:8px solid white;
margin:0 3px;
}
</style>
<script type="text/javascript">
<!--Begin


function expand(imageID){

var width=120;
var height=120;
var max=8;
var i=0;

while(i<=max){
i++;
max--;
width++;
height++;
var t=setTimeout(function() {
var i=i;
document.getElementById('img-'+imageID).style.width=width+"px";
document.getElementById('img-'+imageID).style.height=height+"px";
document.getElementById('img-'+imageID).style.border=max+"px solid #FFFFFF";
}, 500);
}

}
//END-->
</script>
</head>
<body>
<div id="images">

<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-1" onmouseover="expand('1')" onmouseout="shrink(1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-2" onmouseover="expand('2')" onmouseout="shrink(2)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-3" onmouseover="expand('3')" onmouseout="shrink(3)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-4" onmouseover="expand('4')" onmouseout="shrink(4)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-5" onmouseover="expand('5')" onmouseout="shrink(5)"/>

</div>

<div id="text"></div>

</body>
</html>
danielwarner
05-10-2007, 12:06 AM
jslint :/

Thanks for helping me :)
danielwarner
05-10-2007, 12:09 AM
atcually, a question about the script. It now works although the point of the script hasnt worked. I wanted the script to loop the width of the image and width of the border 8 times (so that the image apears to grow gradually) 1 pixel at a time. Hense the while and the setTimeOut. Am i going about this wrong?
danielwarner
05-10-2007, 05:30 PM
nudge*?
argothian
05-11-2007, 01:12 AM
The function that the timeout is calling only sees the most recent value of width and height, therefore after the 500 milliseconds you see the last update only. I think the following will get the effect you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#images {
background-color:#ccc;
padding:6px 3px;
text-align:center;
}
#images img {
width:120px;
height:120px;
border:50px solid white;
margin:0 3px;
}
</style>
<script type="text/javascript">
max=100
function change(id,width,height,tmax){
document.getElementById('img-'+id).style.width=width+"px"
document.getElementById('img-'+id).style.height=height+"px"
document.getElementById('img-'+id).style.border=tmax+"px solid #FFFFFF"
}
function resize(imageID,way){
var width=120
var height=120
i=max/2

while(i>0){
i--
width+=2
height+=2
var t=setTimeout("change(" + imageID + "," +width + "," + height + "," + i+")",(way==0?(max/2-i)*5:i*5)+100)
}
}
</script>
</head>
<body>
<div id="images">

<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-1" onmouseover="resize('1',0)" onmouseout="resize('1',1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-2" onmouseover="resize('2',0)" onmouseout="resize('2',1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-3" onmouseover="resize('3',0)" onmouseout="resize('3',1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-4" onmouseover="resize('4',0)" onmouseout="resize('4',1)"/>
<img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
id="img-5" onmouseover="resize('5',0)" onmouseout="resize('5',1)"/>

</div>

<div id="text"></div>

</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum