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

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


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