[javascript]
Simple Image Rollover Script
The very first JavaScript I ever created and the most popular one amongst my colleagues, this very simple script is ideal for creating Rollover Buttons using images.
First, cut and paste the following script in-between the <head> and </head> tags of your page:
When creating Rollover images, in this case Buttons, you will require 2 images for each button - 1 in the 'off' position and one in the 'on' position. What these two images will look like is entirely down to you and your imagination! You could have images that look as though they sink into the background, or images that seem to 'glow' when the mouse rolls over them. Be creative and experiment with your paint and graphics packages. The effects are endless and some look absolutely stunning! Whatever your choice there is one major rule when creating your rollovers...
REMEMBER! BOTH THE ON AND THE OFF IMAGE MUST BE EXACTLY THE SAME SIZE!
Your different buttons can vary in size, but
BOTH PARTS
of each button
MUST BE THE SAME
or they will render incorrectly.
The way the rollover effect works is that the 'off' image, in this case button1_off.gif or button2_off.gif, is displayed while the function is not in use (remember to change the file type to jpg if your buttons are jpg files). When the user passes the mouse over this image, a piece of JavaScript calls the 'on' image to be displayed instead of the 'off' image. The code for this action is as follows:
This line is telling the page to change 'img1' (rolloverbutton1off.gif as defined in the img tag that follows this line of code) to '02' (rolloverbutton1on.gif - see pics[02] in the script above) AND THEN TO CHANGE 'img1' back to pic[01] ('rolloverbutton1off.gif') when the mouse is taken away from the 'button'.
Put this line of code on the page where you want the 'button' to appear. If you do not wish to link to another page or URL, you replace page.cfm in the href of your anchor tag with javascript:; which will leave the page exactly where it is.
Notice, after the code calling the mouseover and mouseout function, there is an image tag which calls the image 'rolloverbutton1off.gif'. This is to display the button in its non mouseover state. From this point, the changes are made on the screen when the mouse rolls over the button image.
For your next link, you use exactly the same code but change 'img1' to read 'img2' in the three places it appears in the code...MouseOver, MouseOut and in the image tag. You then change your numbers inside ()'s within the same line of code to refer to your new images to be displayed. So, in this instance the changes would go like this:
onMouseOut="changer('img1',01) BECOMES onMouseOut="changer('img2',03) AND
<img name="img1" id="img1" border="0" width="140" height="50" src="rolloverbutton1off.gif" alt="Rollover Button 1"> BECOMES <img name="img2" id="img2" border="0" width="140" height="50" src="rolloverbutton2off.gif" alt="Rollover Button 2">
Notice where the numbers have changed and see which images they are now calling by referring to the javascript at the top of the page. Also, the gif in the img tag is now 'rolloverbutton2off.gif' instead of 'rolloverbutton1off.gif'.
You can add as many buttons as you wish to this script but you must give them their own individual number as shown in the script above, i.e. if you wanted to add another image to the above script, it would look like this:
//Simple Image Rollover Code
//copyright daxassist, 2000-2004
//visit http://www.daxassist.com for this and other javascripts with full tutorials.
if(document.images) {
pics = new Array();
pics[01] = new Image();
pics[01].src = "images/rolloverbutton1off.gif";
pics[02] = new Image();
pics[02].src = "images/rolloverbutton1off.gif";
pics[03] = new Image();
pics[03].src = "images/rolloverbutton2off.gif";
pics[04] = new Image();
pics[04].src = "images/rolloverbutton2off.gif";
pics[05] = new Image();
pics[05].src = "images/your_new_button_off.gif";
pics[06] = new Image();
pics[06].src = "images/your_new_button_on.gif";
}
function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//-->
</SCRIPT>
Notice how your new images have been allocated the numbers 5 and 6 respectively.
You will also need to allocate new 'img' numbers to the OnMouseOver, OnMouseOut and img tags, i.e. the next button you add to the page will become 'img3' and the next, 'img4' and so on.
In the ()'s of your new line of code, you will use the numbers relating to your new images, 05 and 06. If you are unsure as to which numbers would go where, I have created a page with the script for 6 Rollover buttons. You can cut and paste this script into your own page and simply change the .gif's for the names of your own images. If you need more than 6 buttons, study the script and see the pattern in the way the images are placed so you can understand how to add more.
This is a simple and easy to apply piece of JavaScript that can create an effective display function on any web page. Interactive sites are popular as it creates something for the viewer to become involved with. If kept clean and simple, functions like this can enhance your site when used appropriately.