Javascript Rollovers

From LoveToKnow Web-Design

One of the earliest examples of user-interaction on web pages were Javascript rollovers. All they do is make an image change when your mouse rolls over it - but that one little bit of functionality has become essential to the web.

What's Under the Hood of Javascript Rollovers?

Creating a javascript rollover is often the first bit of coding beyond basic HTML that any web designer learns. The process is relatively simple:

  1. Set up the images to pre-load with javascript statements in the HEAD portion of the document (you can have the images load dynamically, but that takes longer, and should only be used for very large images).
  2. Write the "rollover" function to react to the mouse movements of the user.
  3. Set up code that lets the browser know which images qualify as "rollover" images.

Those are the three parts to javascript rollovers. As long as someone has javascript enabled, they will be able to see your images flicker on and off.

How to Code the Three Parts

There are many different ways to code javascript rollovers. The following example is based on the excellent tutorial by Maller. The web is of tutorials that delve more in-depth into the syntax and other aspects of creating this kind of code.

Putting the Javascript in the HEAD
<HEAD><SCRIPT LANGUAGE="JavaScript">
<!-- Exclamation Point and dashes hide JS from non-enabled browsers
YourPic = new Array() //This creates an array or group of data objects, in this case images
YourPic[0]= new Image(150,200) //The width and height of the image are set here in pixels
YourPic[0].src = "BasicImage.jpg" //This is the initial image that has not been rolled over
YourPic[1] = new Image(150,200)//Notice that the number, not the array name, changes
YourPic[1].src = "MouseOverImage.jpg"
This code is the "pre-loading", and it stores the images (one that's shown right away, one that's saved for when the mouse rolls over) right away. It's important to recognize that "YourPic" is the name of the array, and that YourPic[1] has its own file designation different than the others numbers in the array.

=Setting Up the Rollover Function

This code is also usually in the HEAD of the document, immediately after the above section of code:

function ImageRoll(){
document.Link.src = YourPic[1].src;//Link is your own designation
return true;
}
function ImageRollback(){
document.Link.src = YourPic[0].src; //This restores the image when the mouse leaves
return true;
}

// - stop hiding -->
</SCRIPT>
</HEAD>

Making the Images Change in the Document

 Once you have the function written, you can create many instances of rollovers, whether the same two images or more are designated by different YourPic array items. Every place that you want the rollover to occur simply include the Javascript events onmouseover and onmouseout:
<A HREF="http://web-design.lovetoknow.com/" onmouseover="ImageRoll()" onmouseout="ImageRollBack()">//notice that a link is necessary for a rollover to work.
<IMG SRC="BasicImage.jpg" NAME="Link" WIDTH=150 HEIGHT=200 BORDER=0></A> //notice the sizes are the same - making them different distorts the image

Another important thing to notice is that there are two ways to refer to the BasicImage - one is as the actual file name BasicImage.jpg (which works on all browsers) and the other is the NAME="Link" which talks specifically to the Javascript code and says This is one of the places where the rollover function should work. Many more tutorials and javascript methods are available on the web, but starting with rollovers is a good way to introduce yourself to the syntax, structure, and practice of web coding.

Retrieved from "http://web-design.lovetoknow.com/Javascript_Rollovers"

 


Comment on Javascript Rollovers



(Displayed with your comment)                        (Will not be displayed)
Verification Code:   
    

Web Design Categories
LoveToKnow Tools