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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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