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.getElementById("idImage").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="imagetoolbar" content="no" />
>
> <title>Dynamically enlarge image on mouseover and mouseout</title>
>
> <style type="text/css">
> body {margin:64px;}
> </style>
>
>
> <script type="text/javascript">
> // <![CDATA[
> var glbInc, glbDec;
>
> function decreaseSizeImage() // will get back to its normal default size
> {
> if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
> if (document.getElementById("idImage").height > 111)
> {
> document.getElementById("idImage").height -= 1;
> document.getElementById("idImage").width -= 1;
> glbDec = setTimeout("decreaseSizeImage()", 32);
> };
> }
>
> function increaseSizeImage()
> {
> if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
> if (document.getElementById("idImage").height < 150)
> {
> document.getElementById("idImage").height += 1;
> document.getElementById("idImage").width += 1;
> glbInc = setTimeout("increaseSizeImage()", 32);
> };
> }
> // ]]>
> </script>
>
> </head>
>
> <body>
>
> <p><a href="#" onmouseover="increaseSizeImage();"
> onmouseout="decreaseSizeImage();"><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.org/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.webstandards.org"><img
> src="http://www10.brinkster.com/doctorunclear/GRAPHICS/GIF/webstandardsproject.gif"
> alt="Web standards project" /></a></p>
>
> </body></html>
>
> DU
>[/color]
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
