Mouse Over Images
Planet Roddy Photo Satellite
To add a bit of Pizazz to your site you can have images that change when moused over.
You can also make these clickable links to another page or to the full size image.
To do the one on this page I first created a folder called “Rollover”.
Into this I put two images - image.jpg and rolloverimage.jpg - and uploaded it to my server. Make the images whatever size you want them to appear on the page.
Mine are 130x130 px.
The two variations of the script are shown below.
Note that these two variations can exist on the same page.
If you want to have more than one of either type you will have to change “Image1” to “Image2” for the second one and so on....
It makes things a lot easier if you name your images in a simple way before upload.
1.jpg and 1r.jpg for the first, 2.jpg and 2r.jpg for the second etc.
This way, you only have to change one digit each time you copy and paste the code to a new snippet box for each mouse-over.
All the Purple 1s will be changed to 2.
In the “Mouse-over and Click version” you will, of course, have to change the “target” page URL in each case.
The target URL is shown in red and the image URLs in Blue.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://www.mywebsite.com/Rollover/rolloverimage.jpg";
staticImage1 = new Image();
staticImage1.src="http://www.mywebsite.com/Rollover/image.jpg";
// End -->
</script>
<a href="http://www.mywebsite.com/PageName.html" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.mywebsite.com/Rollover/image.jpg" border=0></a>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://www.mywebsite.com.com/Rollover/rolloverimage.jpg";
staticImage1 = new Image();
staticImage1.src="http://www.mywebsite.com/Rollover/image.jpg";
// End -->
</script>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.mywebsite.com/Rollover/image.jpg" border=0></span>
Mouse Over & Click
Mouse Over only
Mouse Over & Click
Mouse Over only
If you can’t be bothered with all this go to http://www.htmlbasix.com/mouseoverimages.shtml to do it the easy way!
Mouse Over to Enlarge
To create the effect of mousing over the thumbnail below to show an enlarged image, use the above code.
Upload a thumbnail and an enlarged image to your “Rollover” folder.
The filename of the enlarged image replaces “rolloverimage.jpg” and the filename of the thumbnail replaces “image.jpg”.
Copyright © Roddy McKay - 2009 - All Rights Reserved
Mouse Over Images
Mouse Over & Click to go to
iWeb for Musicians
iWeb for Musicians E Book
Next Page