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.
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. | |
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.