Chapter 11: Activating Your Pages with JavaScript
newImageObject.src =
‘http://www.intuitive.com/coolsites/examples/Graphics/b-off.jpg’
defaultImage.src =
‘http://www.intuitive.com/coolsites/examples/Graphics/b-on.jpg;
245
Not only does this create two new image objects, one of which represents the rollover’s button-off state (b-off.jpg) and one that represents the rollover’s button-on state (b-on.jpg), but it also associates them with actual graphics by using the URL of two different images.
note
Although these are fully qualified URLs, most rollovers use a lazier shorthand notation like defaultImage.src = ‘b-on.jpg” or something similar.
Changing values on the fly To make the rollover actually work, first, you write a function that changes the image from one value to another; and second, you hook the function into the Web page with the appro priate JavaScript events, as discussed earlier in this chapter. Start by looking at the code that’s needed in the img tag to make it a rollover: <img src=”http://www.crewtags.com/create/images/tags/front/ emoticonsmile.jpg” alt=”fun keychains: happy or sad” id=”changingface” onMouseOver=”makeSad();” onMouseOut=”makeHappy();” />
Most of this should look like a typical image inclusion, with the src attribute for the image’s URL, and the alt tag for text to display in lieu of the graphic. What’s new is that you give this particular image container a unique identifying name: id=”changingface”. That change becomes important when you want to refer to this specific container in the DOM. In addition, this code ties the function makeSad() to a Mouseover event and the function makeHappy() to a Mouseout event. Any guesses about how this is going to work? The other half of this dynamic duo consists of the functions themselves, which are almost completely identical except that one refers to happy and the other refers to sad: function makeHappy() { if (document.images) { imageObject = document.getElementById(“changingface”); imageObject.src = happy.src; }
}
function makeSad()
{
Continued