K
Kenny
I have been trying to write a script that will increase the size of
and image when you mouse over it, and decrease it to original size,
when you mouse out. After a couple of attempts, this is what I've come
up with. In this example, there are 5 images (0 thru 4) all with a
height of 80px. When you mouse over an image, it changes the
growingImage variable equal to the number of the image you mouse over,
when you mouse out, it sets it to 5, which means none of the images,
and runs the chechSize function. All this works fine, except every
time you mouse over an image, the time it takes to grow and shrink
decreases, until it is instantly jumping from small to large, without
transition. Any help fixing that bug would be appreciated, or if you
know a better solution to this problem, I'd love to hear it. Kenny
Here's my code. I only included one image, but there all similar.
var growingImage = 5;
var i = 0;
function resizeImage(imageNumber) {
document.images[imageNumber].height -= 1
document.images[imageNumber].width -= 1
}
function increaseSizeImage(imageNumber) {
document.images[imageNumber].height += 1
document.images[imageNumber].width += 1
}
function checkSize() {
if ((i == growingImage) && (document.images.height < 90)) {
increaseSizeImage(i)
}
if ((i != growingImage) && (document.images.height !=80)) {
resizeImage(i)
}
i++
if (i == 5) {i = 0}
setTimeout("checkSize()", 10)
}
<a href="#" onMouseOver="growingImage=0;checkSize()"
onMouseOut="growingImage=5;checkSize()"><img src="../images/Adora.jpg"
width="60" height="80" border="0" /></a>
and image when you mouse over it, and decrease it to original size,
when you mouse out. After a couple of attempts, this is what I've come
up with. In this example, there are 5 images (0 thru 4) all with a
height of 80px. When you mouse over an image, it changes the
growingImage variable equal to the number of the image you mouse over,
when you mouse out, it sets it to 5, which means none of the images,
and runs the chechSize function. All this works fine, except every
time you mouse over an image, the time it takes to grow and shrink
decreases, until it is instantly jumping from small to large, without
transition. Any help fixing that bug would be appreciated, or if you
know a better solution to this problem, I'd love to hear it. Kenny
Here's my code. I only included one image, but there all similar.
var growingImage = 5;
var i = 0;
function resizeImage(imageNumber) {
document.images[imageNumber].height -= 1
document.images[imageNumber].width -= 1
}
function increaseSizeImage(imageNumber) {
document.images[imageNumber].height += 1
document.images[imageNumber].width += 1
}
function checkSize() {
if ((i == growingImage) && (document.images.height < 90)) {
increaseSizeImage(i)
}
if ((i != growingImage) && (document.images.height !=80)) {
resizeImage(i)
}
i++
if (i == 5) {i = 0}
setTimeout("checkSize()", 10)
}
<a href="#" onMouseOver="growingImage=0;checkSize()"
onMouseOut="growingImage=5;checkSize()"><img src="../images/Adora.jpg"
width="60" height="80" border="0" /></a>