Entire Site

Creative Edge

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

    Chapter 4. Image Basics > Putting Multiple Rollovers on a Page

    Putting Multiple Rollovers on a Page

    It's unlikely that you're going to want to put just one rollover on a page. Since rollovers are often used as user interface elements on a page, you'll usually have more than one button or menu that will use the rollover effect. In order to use more than one, you need to add just a little extra code, as in Script 4.3. The first rollover on the page is used in Figure 4.3 and the second one in Figure 4.4.

    Script 4.3. This script shows how to use more than one rollover on a page.


    Figure 4.3. You can also put multiple rollovers on the same page.

    [View full size image]


    Figure 4.4. Hovering over the second rollover.

    [View full size image]


    To put multiple rollovers on a page

    1. 
    button1Red = new Image
button1Blue = new Image
button2Red = new Image
button2Blue = new Image

    Whereas in the previous task we needed to create two new image objects, in this example we need to create four. In general, you'll need to create two new image objects per rollover. So in this step, you're setting up variables for two rollovers.

    2. 
    button1Red.src =
→ "images/redButton1.gif"
button1Blue.src =
→ "images/blueButton1.gif"
button2Red.src =
→ "images/redButton2.gif"
button2Blue.src =
→ "images/blueButton2.gif"

    Here, we set the src attribute of each new image object to the graphic file with which it is associated.

    3. 
    button1Red = ""
button1Blue = ""
button2Red = ""
button2Blue = ""

    As in the previous task, to prevent errors in older, dumber browsers, we again set the dummy variables (four, this time) to the empty string.

    4. 
    document.button1 = ""
document.button2 = ""

    As there are two rollovers this time instead of one, we need to have two dummy document variables, one for each rollover.

    ✓ Tip

    • Note that each image object and each img tag has a unique name. If you copy and paste rollover code from one section of your page to another, make sure that you set the new version to have a unique name. Otherwise, JavaScript gets confused when doing the rollover and doesn't know what image to put where.


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