Browse DevX
Sign up for e-mail newsletters from DevX


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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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" 
   <img name="about" src="aboutOff.gif">

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.



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