A Few Basic JavaScript Techniques No. 1

by Raymond Yu
30th July 1998

 

 

You are cruising through the ‘net and you arrive at an ordinary looking web page. Just as you are about to move on to better things, the mouse cursor slips over one of the icon. It suddenly changes color, it comes alive, inviting you to click it. Welcome to the exciting world of JavaScript rollover.

You think to yourself: how I wish I could use this trick on my web page?

This article show you how it is done. The JavaScript is built upon the codes covered in the last article.

 

The Code

Fig 1The following are the HTML and JavaScript codes this article will be going through. Fig 1 is what the web page look like when the page is first loaded.

 

 

 

 

 

 

 

Fig 2When the mouse is moved over the MACinations icon it becomes highlighted by a red underscore as in Fig 2. (The number in front of each lines are, of course, not part of the codes. They are inserted for reference only.)

 

 

 

 

 

 

1. <html>

2. <head>

3. <title>Image Swapping Example</title>

4. <script language="JavaScript">

5. <!--

 

6. // Netscape 3.0 or higher and Internet Explorer 4.0 compatibility test (for javascript image swapping)

 

7. browserName = navigator.appName;

8. browserVer = parseInt(navigator.appVersion);

9. if ((browserName == "Netscape" && browserVer >= 3) ||

10. (browserName == "Microsoft Internet Explorer" && browserVer >= 4))

11. compat = true;

12. else

13. compat = false;

 

14. // Put images in cache for quick swapping

15. if( compat ){

16. logo_plain = new Image (262,117);

17. logo_plain.src = "mac.gif";

18. logo_line = new Image (262,117);

19. logo_line.src = "mac_line.gif";

20. }

 

21. // The following codes swap the images

22. function swapImg(imgName, sourceName){

23. if( compat ) {

24. document.images[imgName].src=eval(sourceName+'.src');

25. }

26. }

 

27. //-->

28. </script>

29. </head>

 

30. <body bgcolor="#FFFFFF">

 

31. <a href="#" onMouseOver="swapImg('logo','logo_line')" onMouseOut="swapImg('logo','logo_plain')"><img src="mac.gif" width="262" height="117" name="logo" border="0"></a>

32. </body>

33. </html>

 

Taking care of the less capable browsers

Line 7 to 13 is where you give the JavaScript some intelligence to decide whether the particular browser is capable of handling JavaScript rollovers.

Only Netscape version 3.0 or above and Microsoft Internet Explorer version 4.0 or above can do JavaScript rollover. While this would probably cover the majority of the surfers these days, older versions are still around. The last thing you want is to crash the surfer’s browser (or even worst their computer).

Line 7 and 8 stores the name of the browser and the version number into the variables "browserName" and "browserVer" respectively.

The intelligent part comes from the "if" and "else" statement in line 9 to 13. Essentially, what this is saying is that: if the browser is Netscape and its version number is grater than 3.0, or, if the browser is Internet Explorer and its version number is greater than 4.0, then the browser is compatible. This fact is noted by assigning the value "true" to the variable "compat". Otherwise, the variable "compat" is given a value of "false".

 

Caching images

Just like RAM cache makes a computer run faster, putting images in cache makes the web page load much faster. Because JavaScript rollover replaces one image with another, it is important that the images are preloaded and put into cache.

Although JavaScript rollover would still work without pre-loading the image, the outcome would be much less impressive if the surfer has to wait (even if for a second or so ) for the new image to be downloaded from the server. Effective rollover need to be instantaneous.

Line 14 to 20 put the images required for the rollover into cache.

Again a "if" statement is used to block this code from executing where the browser is not compatible.

To pre-load the image an instance of the image object is declared for each image used. This is done by line 16. The dimension (in length and height) of the image is specified in the bracket. Here, the instance is called "logo_plain". Line 17 lets the browser know where the image is located on the server. Here the image file is located within the same folder as the HTML file.

Where you put your image in another directory or folder you need to put the correct path to the file within the currly bracket. Say, if you put all your images within a subfolder called "images" as most people do, then line 17 need to be modified as follows:

logo_plain.src "images/mac.gif"

Line 18 and 19 do exactly the same thing for the other image.

One word about variable and file names. JavaScript is sometimes (its behaviour in this regard is unclear) case sensitive. To minimise the chance of errors: be consistent with your case.

 

The main bit

Line 22 to 26 is all its takes to swap the image.

Line 22 set up a function called "swapImg" with two variables "imgName" and "sourceName".

"imgName" refers to the name of the image you want to replace, In order that JavaScript knows which image to replace, the image need to be given a name. This is done in line 31 by the inclusion of a "name" attribute. Here, the image is named "logo". "sourceName" refers to the image that you want to put in the place of the old one.

Again, after deciding that the browser is compatible, line 23 and 24 swaps the image. Yes, this single line is what actually swaps the image!

 

What else is required?

The only thing that need to be done now is to put the code that triggered the "swapImg" function at the right time. This is done using codes you have seen in the previous article: the "onMouseOver" and "onMouseOut" event handlers.

Notice that rollover is not possible in a plain image tag. For rollover to occur the image object need to be a link. That is you need to enclose the <img…> tag within the <a href=…></a> tags, as done in line 31.

This time when the mouse is over the logo, the onMouseOver event handler activates the "swapImg" function. The values "logo" and "logo_line" is passed to the function. As a result the image named "logo" is changed to the cached image "logo_line".

When you move the mouse away from the image, the original logo is restored through the action of "onMouseOut".

 

The rollover graphics

While you can swap one image with any other image, you should bear the following guide in mind when designing graphics for rollover buttons:

1. All graphics should be exactly the same size. This makes spacing when laying out the page much easier, and makes the rollover effect more predictable.

2. Importantly, make sure all text and graphical elements that are identical in the original and subsequent image(s) are lined up in exactly the same position. Eg. In the example used here both graphics are identical pixel for pixel except the red line.

If the word "MACinations" in both image are misalign even by one pixel the rollover effect would look as if the images are shifting from side to side. Of course this may be the effect that you are after.

3. The image file should not be too large. Smaller graphics can be displayed much more quickly. Even thought the images are cached, the browser still takes time to display the image on screen depending on the speed of the computer.

Rollover effect appear best if they have an instantaneous response. This is much more important than complex and fanciful graphics that may look great, but whose sluggish response spoils the experience.

 

 


 

BackPrevious Article on JavaScript
BackBack to Main Contents

 

 

Modified on: 29th November, 1998.
Copyright © 1998 Raymond Yu