Basic Image Swap Question...

**LayneMitch** · 03-16-2008, 02:15 AM

Hello everyone.

I'm completely new to JS. I'm just learning the basics.

I'm doing a problem in a book that wants me to mouse over one image and change two other images while mousing over that one image. My code doesn't seem to be working...Any idea of how to do this?

Code:

<html>
<head>
<style type="text/css"> 
a {border: none;} 
* {border:0; padding:0; margin:0;} 
#container {position:relative; width: 1000px; height: 600px; margin: 0 auto 0 auto; border: 1px solid black;} 
#img1 {position:absolute; left: 100px; top: 100px;}
#img2 {position:absolute; left: 300px; top: 100px;}
#img3 {position:absolute; left: 450px; top: 100px;} 
</style></head>
<body> 
<div id="container"> 
<div id="img1">
<img src="C:\wamp\www2\JRStudios2\images\Link-Bkgd5.png" 
    onMouseOver="my_image1.src='C:\wamp\www2\JRStudios2\images\Link-Bkgd2.png';" 
            "my_image2.src='C:\wamp\www2\JRStudios2\images\Link-Bkgd1.png';" 
    onMouseOut="my_image1.src='C:\wamp\www2\JRStudios2\images\Link-Bkgd1.png';" 
           "my_image2.src='C:\wamp\www2\JRStudios2\images\Link-Bkgd2.png';"
alt="">
</div> 
<div id="img2"> 
    <img src="C:\wamp\www2\JRStudios2\images\Link-Bkgd1.png" name="my_image1"  alt="">
</div> 
<div id="img3">
    <img src="C:\wamp\www2\JRStudios2\images\Link-Bkgd2.png" name="my_image2" alt="">
</div> 
</div>
</body>
</html>

**ForrestCroce** · 03-16-2008, 02:38 AM

I don't know whether this is it or not, but try putting the mouse event code in functions instead of inline. I'm not sure whether you can put more than one statement inside an inline event handler like that?

On another note, make onmouseover and -out all lower case, if you'd like your code to validate.