You've probably seen it on many other sites, it's where the images interact with your cursor, once you pass it over them. Well, what happens is there are 2 images, and when your mouse moves over the image you see, it is replaced by another.
To do this, you will need two images that are similar or will look good when being replaced by each other.
Let's call the first image to the right "banoff.gif" and the second one "banon.gif" . You want it to appear as though the first button changes color and text when the cursor is placed over it.
Place the following Java Script below on your web page, somewhere between the <HEAD> and the </HEAD> tags. You will only need to change the names of the images.
<SCRIPT LANGUAGE = "JavaScript">
<!--
if (document.images) {
img1on = new Image();
img1on.src = "banon.gif";
img1off = new Image();
img1off.src = "banoff.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");}
}
// -->
</SCRIPT>
|
|
Next you have to identify the image itself on your Web page. To do this, copy the link and image insertion HTML below:
<A HREF ="INSERT_URL.html" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<IMG SRC="banoff.gif" NAME="img1" border=0></A>
|
|
That's it. If you would like to do this with more than one image, then concentrate on the blue part of the script. You will simply copy the blue part, and then paste it directly below it. Next you must make changes to the part you just pasted. So simply change the 1's to 2's, and then of course change the images to the ones you want to use for your second image replacement.
When placing the second image on the page, copy the same code (blue areas) as before, but change all "img1" to "img2" and then make sure to change the IMG SRC tags for the second image. Don't forget to change the link too. You can keep doing this for as many images as you want, just continue to replace the numbers and images.
DEMO - Place your mouse on the button!:
