PDA

Click to See Complete Forum and Search --> : MouseOver/MouseOut command???

p2bc
09-08-2003, 04:21 AM
At present this is my code for some buttons:


<a href="website"><img src="pictures.png" onmouseover="this.height=39;this.width=42;"
onmouseout="this.width=37;this.height=34" width="37" height="34" alt=""></a>


So that when you roll over the button it enlarges a little to show the image better. But as it is now, the image look pixilated. So I did the reverse an saved the image at the larger size, and let the html file shrink the file to the smaller WxH. But that was disastrous. I looked worst than the pixilated image.

So here is my question, can I use both versions of the picture.
One for the mouseOut command, and one for the mouseOver command.

Something along the lines:

<a href="website"><img src="pictures.png" onmouseover=" <img scr=picture2.png height=39;this.width=42>"
onmouseout="<img scr=picture2.png width=37;this.height=34" width="37" height="34" alt=""></a>


I know the syntax is probably wrong. But is it possible???
If so, can you help out on the syntax.

Thanks
Fang
09-08-2003, 06:55 AM
Changing the height/width of an image doesn't usually work, even when the ratios are correct.
You can swap the images:

<!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>
<title>Basic XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
//pre-load
var myImg=[];
myImg[0]=new Image(34, 37);
myImg[0].src="images/picture_small.png";
myImg[1]=new Image(39, 42);
myImg[1].src="images/picture_large.png";

function SwapImage() {
document.website.src=(document.website.src=="images/picture_small.png")? myImg[1].src : myImg[0].src;
}
//-->
//]]>
</script>

</head>
<body>
<a href="website"><img src="picture_small.png" name="website" onmouseover="SwapImage();" onmouseout="SwapImage();" width="37" height="34" alt=""></a>
</body>
</html>
p2bc
09-08-2003, 07:09 AM
Thanks I will give it a try.