Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Essential JavaScript: 8 Cross-Browser Solutions-5 : Page 5

There's a core set of problems that every JavaScript developer will run across sooner or later. This article shows you how to deal with eight of the most common situations.


advertisement

Creating Image Rollovers
Problem 4: I want to create those cool buttons whose appearance changes when the mouse moves over them. How do I do that?

Image rollovers are probably the most widely used scripts on the Web. Implementing them is as simple as changing the src attribute of an <img> element when the mouse moves over the image:

   <a href="aboutUs.htm" 
   onMouseOver="on('about')" 
   onMouseOut="off('about')">
   <img name="about" src="aboutOff.gif">
   </a>

Then in your script:



   function on(img){
      document[img].src = img + 'On.gif';
   }
   function off(img){
      document[img].src = img + 'Off.gif';
   }

When the user moves the mouse into or out of the image area, the anchor tag calls either the on or off function, passing a reference to the associated image as the img argument. The on and off functions swap the src attribute value to the appropriate image. Note that the <a> element is required only due to Netscape 4's inability to access an <img> element's src attribute directly (it doesn't recognize the events in the <img> element)—you don't need the anchor tag in Netscape 6 or in IE.

Now that you've seen this explicit version, you should try implementing a slightly more complex version that combines the on() and off() functions into a single JavaScript function. (Hint—pass two arguments—the image object and the src).



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date