Site Development
Downloads
Help!!
Home
ExampleThe image rollover is one of the most popular and flexible JavaScript techniques. The general idea is to get an image to change dynamically as the mouse hovers over it or on another JavaScript Event. The screw below is an example. Hover over the screw to turn it into a capnut.  Neat, huh? This can be applied to any image and works in all browsers. It really helps with image links as it makes it clear whether or not the viewer is over the link. Making A Basic PageWe'll begin making a basic image rollover by selecting a couple of images to work with. Any images will do, but those close to the same size work a little smoother. If you want to use the screw, capnut, and washer images from this site; you can download the JPGs in a zipped file here. Now lets make a simple page with the first image we want presented on it. I'll be calling this initial image "the default image":
<html> Nothing much exciting here. Just a white page with a picture of a screw on it. Let's get that screw to become a capnut. Naming The ImageThe first thing we need to do is name our image with HTML's NAME attribute. This will tell JavaScript which image we're referring to when we have a bunch of images to choose from. Do this even if you only have one image, too. <img src="screw.jpg" name="pic1"> We've named this <img> tag "pic1". This name represents the image's "slot" as opposed to an actual image file. It's the SRC attribute that determines the actual image file displayed in the <img> slot. Making The EventNext, we need to determine what event we want to control the image rollover. In the above example I used onMouseOver to start the rollover and onMouseOut to reset the default image. We run into a problem with picking up the event because Netscape doesn't recognize some events in the <img> tag itself. To get around this, we'll make our image an image link and put the events in the link's <a> tag. I'll make this a dead link so that clicking it won't do anything:
<a href="javascript://" onMouseOver="roll_this()"> Just a few things to mention. First, I made the link a dead link. It does nothing when clicked. I did this by putting a simple, empty JavaScript "comment" in the HREF -- "//". The onMouseOver event will now be picked up in Netscape and IE because it's coded in the <a> tag as opposed to the <img> tag. Making an image a link automatically puts a border around the image. I removed this link border by setting the <img>'s BORDER attribute to zero. Accessing The Image SRCNow we're just about ready to code the rollover function I called "roll_this()". Keep in mind that all we're doing is dynamically changing the image's source file or SRC attribute. The image's SRC can be referenced in JavaScript with "document.images.pic1.src". The term "document" refers to the current document. We can begin our reference here, as opposed to "window" or "navigator" because the Event and the rollover both occur on the same page. We'll see how to make rollovers in another window or document later. The term "images" refers to all of the images in a document. They're automatically put into a JavaScript array. We'll be dealing with arrays later. For now, just remember that you need to refer to the collection of images in the document before specifying a particular image. Finally, we refer to our specific image's name and it's "src" property. When we set the "src" property to the URL of another image. That image will magically appear causing the rollover. Making The RolloverLets make the function "roll_this()" that will roll over the image. Put the following code in the <head> of the page:
<script language="JavaScript"> This simple line of JavaScript will change the SRC for the image named "pic1" to the "capnut.jpg" image. The capnut image will now replace the screw image. That's all there is to it. To change the image back to a screw, just code an onMouseOut event in the image's <a> tag along with the onMouseOver event. Send it to a separate function that will reset "pic1's" SRC back to "screw.jpg". It works the same way, just a different event. "In-Tag" Image RolloversIn the case of a single image rollover, like the one we just coded, you might want to put the whole JavaScript right in the image link's <a> tag instead of coding a function in the page's <head>. To do this we just put the image's reference right in the event:
<a href="javascript://" Notice the use of single quotes around the image filenames. These are used because the JavaScript is already in double-quotes. Also keep in mind that the values for "src" are actually URLs to image files, not just the filenames. You'll have to enter the needed path to the image files used. This example assumes that both of the images and the page are in the same directory (folder). Summary & Exercises
For a single rollover, you can put the JavaScript right in the <a> tag. Make a page with one working rollover. Now, get some more images and make a second rollover. For now, use a separate function for each image's onMouseOut and onMouseOver. We'll learn how to pare this down to one function for a whole slew of images in the next lesson.
|
Select a couple of images to work with. Try images of different sizes to see what effect that has. In practice, images of the same size are used unless a special effect is needed.
To Next Beginning JavaScript Lesson
Back To Beginning JavaScript Index