Kenny wrote:
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.
[snipped]
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
[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
