• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 2. Image Rollovers > Project I: Image Rollover Script

Project I: Image Rollover Script

Creating and Inserting the Image Objects

Before we get to the creation of the image objects themselves, we must decide where to put our script. Because the rollovers will be on every page of the site, it makes sense to place our script into an external JavaScript file. That way, we only need to place it in a single location instead of on each page. We have already created an external JavaScript file called jsFunctions.js for one of our previous projects, so we can simply add our new script to that file. The home page already has the call to the external file, so we can just copy that <script> tag to all of the other pages on the site.

The first step in our script is to cloak for older browsers that don't support the IMAGE object, which is necessary for our rollover script. In Chapter 1 we learned how to use JavaScript to gather the browser and platform information. We could use a variation of that method in which we set up a bunch of if statements that test for every browser that doesn't support the IMAGE object; however, this would be loads of work. Fortunately for us, there is a simpler way. We can test if the user's browser supports rollovers using only a single if statement, as shown in the following lines of code:


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint