At present this is my code for some buttons:<br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="pictures.png" onmouseover="this.height=39;this.width=42;" <br />
onmouseout="this.width=37;this.height=34" width="37" height="34" alt=""></a><br />
<br />
<br />
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.<br />
<br />
So here is my question, can I use both versions of the picture.<br />
One for the mouseOut command, and one for the mouseOver command.<br />
<br />
Something along the lines:<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="pictures.png" onmouseover=" <img scr=picture2.png height=39;this.width=42>" <br />
onmouseout="<img scr=picture2.png width=37;this.height=34" width="37" height="34" alt=""></a><br />
<br />
<br />
I know the syntax is probably wrong. But is it possible???<br />
If so, can you help out on the syntax.<br />
<br />
Thanks<!--content-->Changing the height/width of an image doesn't usually work, even when the ratios are correct.<br />
You can swap the images:<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>Basic XHTML</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
<!--<br />
//pre-load <br />
var myImg=[];<br />
myImg[0]=new Image(34, 37);<br />
myImg[0].src=http://www.webdeveloper.com/forum/archive/index.php/"images/picture_small.png";<br />
myImg[1]=new Image(39, 42);<br />
myImg[1].src=http://www.webdeveloper.com/forum/archive/index.php/"images/picture_large.png";<br />
<br />
function SwapImage() {<br />
document.website.src=http://www.webdeveloper.com/forum/archive/index.php/(document.website.src=="images/picture_small.png")? myImg[1].src : myImg[0].src;<br />
}<br />
//--><br />
//]]><br />
</script><br />
<br />
</head><br />
<body><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="picture_small.png" name="website" onmouseover="SwapImage();" onmouseout="SwapImage();" width="37" height="34" alt=""></a><br />
</body><br />
</html><!--content-->Thanks I will give it a try.<!--content-->
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="pictures.png" onmouseover="this.height=39;this.width=42;" <br />
onmouseout="this.width=37;this.height=34" width="37" height="34" alt=""></a><br />
<br />
<br />
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.<br />
<br />
So here is my question, can I use both versions of the picture.<br />
One for the mouseOut command, and one for the mouseOver command.<br />
<br />
Something along the lines:<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="pictures.png" onmouseover=" <img scr=picture2.png height=39;this.width=42>" <br />
onmouseout="<img scr=picture2.png width=37;this.height=34" width="37" height="34" alt=""></a><br />
<br />
<br />
I know the syntax is probably wrong. But is it possible???<br />
If so, can you help out on the syntax.<br />
<br />
Thanks<!--content-->Changing the height/width of an image doesn't usually work, even when the ratios are correct.<br />
You can swap the images:<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>Basic XHTML</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
<!--<br />
//pre-load <br />
var myImg=[];<br />
myImg[0]=new Image(34, 37);<br />
myImg[0].src=http://www.webdeveloper.com/forum/archive/index.php/"images/picture_small.png";<br />
myImg[1]=new Image(39, 42);<br />
myImg[1].src=http://www.webdeveloper.com/forum/archive/index.php/"images/picture_large.png";<br />
<br />
function SwapImage() {<br />
document.website.src=http://www.webdeveloper.com/forum/archive/index.php/(document.website.src=="images/picture_small.png")? myImg[1].src : myImg[0].src;<br />
}<br />
//--><br />
//]]><br />
</script><br />
<br />
</head><br />
<body><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"website"><img src="picture_small.png" name="website" onmouseover="SwapImage();" onmouseout="SwapImage();" width="37" height="34" alt=""></a><br />
</body><br />
</html><!--content-->Thanks I will give it a try.<!--content-->