changing image size on roll over

DU · Jul 20 '05, 12:29 PM

Re: changing image size on roll over

Kenny wrote:
[color=blue]
> 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.[/color]

[snipped]

Any help fixing that bug would be appreciated, or if you[color=blue]
> know a better solution to this problem, I'd love to hear it. Kenny[/color]

[snipped]

Here's a draft version of what I would do. The following code is valid,
has been tested and is working on Mozilla 1.5 final, K-meleon 0.8, MSIE
6 SP1 for Windows and Opera 7.23. I'm loading the file here since I have
now banner ads on my site and want to avoid that for now until I can
find another solution.
The file is a draft version because I would register event handlers for
the image(s) instead of using event attributes like in the same spirit
of this file:

Continuous modification of an image's opacity

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicOpacity.html

Also, your file as submitted was using an embedding anchor for the
image: now, the events could be registered on the image or on the
anchor. The difference is in accessibility and usability: the default
border around links would still need to be there if link is used. I also
saw other usability issues: resorting to setTimeout(expr , 10) is way too
demanding on several systems. I personally never go under 32 msec to
avoid crashes on the users' system: some video cards and system
resources can not perform safely, confortably with DHTML at less than
32msec. In any case, animations faster than 32msec are too fast for the
eyes. If your increase/decrease height needs to be "faster", than
increase the step from 1 to 2 or more. I.e.:
document.getEle mentById("idIma ge").height += 2;

DU

---------------

<!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-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08: 00" />
<meta http-equiv="imagetoo lbar" content="no" />

<title>Dynamica lly enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
</style>

<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeIma ge() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(g lbInc); glbInc = null;};
if (document.getEl ementById("idIm age").height > 111)
{
document.getEle mentById("idIma ge").height -= 1;
document.getEle mentById("idIma ge").width -= 1;
glbDec = setTimeout("dec reaseSizeImage( )", 32);
};
}

function increaseSizeIma ge()
{
if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
if (document.getEl ementById("idIm age").height < 150)
{
document.getEle mentById("idIma ge").height += 1;
document.getEle mentById("idIma ge").width += 1;
glbInc = setTimeout("inc reaseSizeImage( )", 32);
};
}
// ]]>
</script>

</head>

<body>

<p><a href="#" onmouseover="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><img id="idImage"
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/JPG/KrustyHelpless. jpeg"
width="113" height="111" alt="Krusty is helpless" /></a></p>

<p id="validation" ><a href="http://validator.w3.or g/check/referrer"><img
src="http://www.w3.org/Icons/valid-xhtml10.png" title="Verify this
page's markup syntax" alt="Valid XHTML 1.0!" /></a> <a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://www.w3.org/Icons/valid-css.png" title="Verify this page's
CSS code" alt="Valid CSS!" /></a> <a
href="http://www.webstandard s.org"><img
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/GIF/webstandardspro ject.gif"
alt="Web standards project" /></a></p>

</body></html>

DU

DU · Jul 20 '05, 12:29 PM

Re: changing image size on roll over

DU wrote:
[color=blue]
> Kenny wrote:
>[color=green]
>> 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.[/color]
>
>
> [snipped]
>
> Any help fixing that bug would be appreciated, or if you
>[color=green]
>> know a better solution to this problem, I'd love to hear it. Kenny[/color]
>
>
> [snipped]
>
> Here's a draft version of what I would do. The following code is valid,
> has been tested and is working on Mozilla 1.5 final, K-meleon 0.8, MSIE
> 6 SP1 for Windows and Opera 7.23. I'm loading the file here since I have
> now banner ads on my site and want to avoid that for now until I can
> find another solution.
> The file is a draft version because I would register event handlers for
> the image(s) instead of using event attributes like in the same spirit
> of this file:
>
> Continuous modification of an image's opacity
> http://www10.brinkster.com/doctorunc...icOpacity.html
>
>
> Also, your file as submitted was using an embedding anchor for the
> image: now, the events could be registered on the image or on the
> anchor. The difference is in accessibility and usability: the default
> border around links would still need to be there if link is used. I also
> saw other usability issues: resorting to setTimeout(expr , 10) is way too
> demanding on several systems. I personally never go under 32 msec to
> avoid crashes on the users' system: some video cards and system
> resources can not perform safely, confortably with DHTML at less than
> 32msec. In any case, animations faster than 32msec are too fast for the
> eyes. If your increase/decrease height needs to be "faster", than
> increase the step from 1 to 2 or more. I.e.:
> document.getEle mentById("idIma ge").height += 2;
>
> DU
>
> ---------------
>
> <!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-us">
>
> <head>
>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <meta http-equiv="Content-Language" content="en-us" />
> <meta http-equiv="Content-Style-Type" content="text/css" />
> <meta http-equiv="Content-Script-Type" content="text/javascript" />
> <meta http-equiv="date" content="2003-12-02T09:54:03+08: 00" />
> <meta http-equiv="imagetoo lbar" content="no" />
>
> <title>Dynamica lly enlarge image on mouseover and mouseout</title>
>
> <style type="text/css">
> body {margin:64px;}
> </style>
>
>
> <script type="text/javascript">
> // <![CDATA[
> var glbInc, glbDec;
>
> function decreaseSizeIma ge() // will get back to its normal default size
> {
> if(glbInc != null) {clearTimeout(g lbInc); glbInc = null;};
> if (document.getEl ementById("idIm age").height > 111)
> {
> document.getEle mentById("idIma ge").height -= 1;
> document.getEle mentById("idIma ge").width -= 1;
> glbDec = setTimeout("dec reaseSizeImage( )", 32);
> };
> }
>
> function increaseSizeIma ge()
> {
> if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
> if (document.getEl ementById("idIm age").height < 150)
> {
> document.getEle mentById("idIma ge").height += 1;
> document.getEle mentById("idIma ge").width += 1;
> glbInc = setTimeout("inc reaseSizeImage( )", 32);
> };
> }
> // ]]>
> </script>
>
> </head>
>
> <body>
>
> <p><a href="#" onmouseover="in creaseSizeImage ();"
> onmouseout="dec reaseSizeImage( );"><img id="idImage"
> src="http://www10.brinkster .com/doctorunclear/GRAPHICS/JPG/KrustyHelpless. jpeg"
> width="113" height="111" alt="Krusty is helpless" /></a></p>
>
> <p id="validation" ><a href="http://validator.w3.or g/check/referrer"><img
> src="http://www.w3.org/Icons/valid-xhtml10.png" title="Verify this
> page's markup syntax" alt="Valid XHTML 1.0!" /></a> <a
> href="http://jigsaw.w3.org/css-validator/check/referer"><img
> src="http://www.w3.org/Icons/valid-css.png" title="Verify this page's
> CSS code" alt="Valid CSS!" /></a> <a
> href="http://www.webstandard s.org"><img
> src="http://www10.brinkster .com/doctorunclear/GRAPHICS/GIF/webstandardspro ject.gif"
> alt="Web standards project" /></a></p>
>
> </body></html>
>
> DU
>[/color]

There is also this file

Dynamic magnification of an image:

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/MSIE6Zoom.html

but it only works in MSIE 6 for windows (it might work also in MSIE 5.5)
because Mozilla based browsers do not have an equivalent to MSIE's
proprietary style zoom property.
But then it would be easy to make that code work by modifying the image
width and height.
The difference with your code is that here there is no anchor
surrounding the image and the image size is entirely under the user's
control via a mouse drag, which I think is more pleasing for the user.

DU

DU · Jul 20 '05, 12:29 PM

Re: changing image size on roll over

DU wrote:[color=blue]
> DU wrote:
>
> There is also this file
>
> Dynamic magnification of an image:
> http://www10.brinkster.com/doctorunc...MSIE6Zoom.html
>
> but it only works in MSIE 6 for windows (it might work also in MSIE 5.5)
> because Mozilla based browsers do not have an equivalent to MSIE's
> proprietary style zoom property.
> But then it would be easy to make that code work by modifying the image
> width and height.
> The difference with your code is that here there is no anchor
> surrounding the image and the image size is entirely under the user's
> control via a mouse drag, which I think is more pleasing for the user.
>
> DU
>[/color]

I created an entirely new file which works very well for MSIE 6 for
Windows, Mozilla 1.5, K-meleon 0.8, Opera 7.23 and should work for all
DOM 2 compliant browsers. It works on a click and drag (up or down) user
interaction. The markup and CSS code would be entirely valid if it was
not of the banner ad include.

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicMagnification.html

DU

**Brian** · Jul 20 '05, 12:30 PM

Re: changing image size on roll over

"Kenny" <kennyheaton@em ail.com> wrote in message
news:3d2c021d.0 312011959.7f9c5 de9@posting.goo gle.com...[color=blue]
> 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(ima geNumber) {
> document.images[imageNumber].height -= 1
> document.images[imageNumber].width -= 1
> }
>
> function increaseSizeIma ge(imageNumber) {
> document.images[imageNumber].height += 1
> document.images[imageNumber].width += 1
> }
>
> function checkSize() {
> if ((i == growingImage) && (document.image s[i].height < 90)) {
> increaseSizeIma ge(i)
> }
> if ((i != growingImage) && (document.image s[i].height !=80)) {
> resizeImage(i)
> }
> i++
> if (i == 5) {i = 0}
> setTimeout("che ckSize()", 10)
> }
>
> <a href="#" onMouseOver="gr owingImage=0;ch eckSize()"
> onMouseOut="gro wingImage=5;che ckSize()"><img src="../images/Adora.jpg"
> width="60" height="80" border="0" /></a>[/color]

I see your problem. When you do a mouseover, you register a timeout, that
continues to register itself again, and does not stop. When you do another
mouseover, you register a second timeout, which continues to register
itself, causing the function to be called twice as often, making it work
twice as fast. The same pattern continues to happen, until there are so
many callbacks registered, that the action happens almost immediately.

There are two ways to solve this... Either put some conditional logic around
the setTimeout call, to stop calling it when your action is done... or save
the ID that setTimeout returns in a global variable, and call clearTimeout
on that value for each mouseover, thus killing the previous routine.

My guess is that a combination of both options will be most useful... The
first one to stop the timeout from occuring when it is no longer needed, and
the second one to make sure if the first one is still running, it gets
killed, so two are not running at the same time.

Brian

changing image size on roll over

changing image size on roll over

Comment

Comment

Comment

Comment