Site Development
Downloads
Help!!
Home
An ExampleIn the previous lesson, we made individual image rollovers by using a separate function for each image's individual events. That's two functions per image and can get very burdensome and bloat your code. We can simplify things by using one function per event and parameters to tell the function which image we want to roll and what image file to use. The example below was coded this way. Hover over the logos and you'll see a different image rollover for each one. 
The above was coded with only two functions. One for the onMouseOver event and one for the onMouseOut event. This really streamlines your code and saves time when coding several rollovers. A common use of multiple rollovers is when using image link rollovers in your site's navigation. ParametersWe've previously discusses parameters and used them in other JavaScripts. All you need to do is put some data in the function call's parentheses and some variables to catch them in the function's parentheses. We'll put the image's NAME and the URL of the replacement image in the Event's function call. Then we'll make "receiving" variables in the function that will receive and use this data. Coding The EventsBegin by making a page with three image links. Make sure to give each <img> a different NAME attribute. I used "pic1", "pic2", etc., but you can use whatever names you want. The names will let JavaScript tell one <img> from another. Now lets code our events in the <a> tags. Make note of the use of the <img>'s name and the URL of the image we want to pop up:
<a href="javascript://" Notice how the parameters we used only concern the things that that are different among the images -- the image's name and the image we want to pop up during the onMouseOver. The FunctionsThe big trick to coding the functions is to add "receiving parameters" in the function's parentheses. These will be used in the function's statements to represent the specific <img> object and the URL to the replacement picture we want to be used. Between the <script> tags in your <head> code:
function rollThis(whichImage,whichPic){ The most important thing to notice here is the use of square brackets "[ ]" to enclose "whichImage". The receiving parameter "whichImage" is not the name of an actual <img> object, it's a variable holding the name of an <img> object. When you use a parameter or variable as a dynamic reference to an object (a specific image object in this case), you need to put it in square brackets and place it immediately after the parent object ("images" in this case). A dot goes after the closing square bracket -- " ] " -- and the object reference continues. If you were using the specific string name of an image, like "pic2", you'd code it like we have previously: "document.images.pic2.src". This is important to grasp. When you're dealing with a variable that can represent one of a group of objects, the square bracket method must be used for the variable holding the specific object's value. Also note that "whichImage" and "whichPic" are not in quotes. They don't need to be. They are parameters/variables, not strings. You'll notice in the "changeBack()" function, that the image "cplogo.jpg" is in quotes. It's an actual string -- the URL to the cplogo.jpg image. Stings go in quotes, parameters and variables do not. The Code In ActionLets take a closer look at what's going on when these image rollovers occur. First, the onMouseOver event is activated when the viewer hovers over one of the images. I'll be using the second image for this example (NAME="pic2"). When the onMouseOver event occurs, the "rollThis()" function is called. The value "pic2" is stored in the receiving parameter "whichImage". The value "washer.jpg" is stored in "whichPic". The "rollThis()" function runs using the parameters passed to it from the function call. The "document.images" object is called. This is actually an array of all of the images on the page. The specific image is now referred to by "[whichImage]" which contains the value "pic2". "pic2" is the NAME of the <img> object we want rolled. The "src" accesses the URL of the image file that's occupying "pic2's" slot. The "=whichPic" sets the new image on the page. The parameter "whichPic" holds the value "washer.jpg" which it got from the function call in the onMouseOver in pic2's link. The onMouseOut works the same way except that the image "cplogo.jpg" is used in all cases for all of the images. Because the value doesn't change, there's no need to use a parameter. Pre-Loading ImagesIf you've been coding image rollovers on your machine, they've been working quickly and smoothly. This is not the case when you upload your page for others to see. They don't have the images on their hard drive yet. The image rollover would initiate a regular image download and the viewer would have to wait for the rollover image to load. We can get around this by "pre-loading" the images with JavaScript. We'll make all of the image's load to the viewer's browser's cache before the <body> of the page loads. We'll use JavaScript's "new Image()" function to do this. The preloading code is coded between the <script> tags, but outside of any function. I'd recommend putting it first thing after the opening <script> tag.
<script language="JavaScript'> The above would load a single image. Begin the pre-loading code by typing in a variable. I used "first_picture", but you can use what you'd like. The shorter the better as a rule. Now set the variable equal to "new Image()". Don't forget the parentheses. This is the first statement of two. Always end your statements with a semicolon. Now code the second statement. Type in the name of your image variable and add ".src". The source will be set to the URL of the image you want pre-loaded. You'll need these two lines of code for each image you preload. Ugghhhh. Later, when we study loops and arrays, we'll explore an automatic way to pre-load a large number of images. Note that this does not cause images to load faster. They load at the same rate they would have otherwise. They just load early and are already on the viewer's hard drive before the page is loaded and the rollover is needed. Summary & Exercises
Now code the rollovers below using only two functions -- one for onMouseOver and one for onMouseOut. You don't have to get the pattern right. Just make the rollovers. 
 HINT: You'll need to use a second parameter in the onMouseOut function call to get the initial image reset. They're different in this case. Add some real URLs to in your <a> tags' HREFs to make bona fide rollover links. For those of you who just can't get enough of this, try coding a multiple rollover using only one function for both onMouseOver and onMouseOut. Hint: Add a parameter to tell the function if the onMouseOut or onMouseOver event is occuring. Now use an IF statement to place the appropriate image. It's a little more involved than it sounds.
|
To Next Beginning JavaScript Lesson
Back To Beginning JavaScript Index