Image roll over


Tutorial “Image Rollover”

1.     First you need to picture that you want to change here are cool ones I have selected. That you can save to you desktop.










                                                                                                           

2.     Next create a body

<body>



3.     Than you need your first image selected so the code would be different depending on the image location on your computer. And you may need to adjust the image size depending on the picture, so they will line up.

<img src="file:///UR System/Users/uruser/Desktop/root file/moon_2_lg.gif" width="190" height="174"



4.     Now we need to let the computer know that we want it to change images when the mouse scrolls over it the code for that is

onmouseover="this.src='

5.     You than enter the picture that you want to change. Once again this may vary depending on where you have you image locted at.

onmouseover="this.src='file:///UR System/Users/uruser/Desktop/root file/images.jpg'"

6.     Now all you have to do is let the computer know that you want the image to go back to the original image after you scroll off it. So enter

onmouseout="this.src='

7.     Followed by the original  image.

<img src="file:///UR System/Users/uruser/Desktop/root file/moon_2_lg.gif" width="190" height="174" onmouseover="this.src='file:///UR System/Users/uruser/Desktop/root file/images.jpg'"onmouseout="this.src='file:///UR System/Users/uruser/Desktop/root file/moon_2_lg.gif'" />

8.     in the end it should look something like this.