- JavaScript Concepts
- Open Window
- Change Property
- Creating a Cascading Menu
- Creating Fancy Rollovers
- Cookies and Code Snippet
- Debugging Your JavaScript
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Fancy Rollovers
It's fairly common to have an image change when users mouse over it. Dreamweaver, of course, makes it easy to create this effect with the Swap Image behavior or the command Insert > Interactive Images > Rollover Image. But what if you want to change some text at the same time? You can do that, too, but it takes a little more work.
We'll first look at how to create an effect that changes two images when users mouse over a third image.
To change multiple images on a rollover:
Create a new HTML page and save it.
Insert an image onto the page.
This image will be the hotspot for your rollover.
Insert two more images onto the page. These images will change when users mouse over the first image.
In the Property inspector, name the images you just added (Figure 13.32).
Figure
13.32 Name your images in the Property inspector. Select the hotspot image.
In the Behaviors panel, click the + (plus) button and select Swap Image from the drop-down menu.
The Swap Image dialog box will appear (Figure 13.33).
Figure
13.33 The Swap Image dialog box is pretty basic: Select any named image in
the Images list box and then click Browse to set a new source for it. You can
swap several images at once-the image that triggers this change is the one you
had selected when you opened this dialog box. In the Images list box, select the name of one of the other two images.
In the Set Source To file box, specify the file you want the image to change to.
Repeat Steps 7 and 8 for the second target image.
Click OK to close the dialog box.
Preview the file in your browser.
The second two images will change when the user mouses over the first one (Figure 13.34).
Figure
13.34 Ta-da! The rollovers work...sort of. When we mouse over the arrow, the
smiley frowns, and the eyes turn into our coworker, Vlad. If you want Vlad to
work elegantly, make sure the image being swapped in is the same size as the one
it replaces.
)
Figure
13.32)
Figure
13.33 )
Figure
13.34You might have guessed that we're going to use the Change Property behavior we examined earlier to change the text. But this time we'll use the onMouseOver and onMouseOut events to trigger the behavior, instead of the onClick event we used before.
To change text at the same time as you change images:
Add some text to the page from the previous example.
Surround the text with a <span> tag (See To add a <span> to your page, earlier in this chapter). Make sure to add an id to the span tag.
Select your hotspot image. In the Behaviors panel, click on the + (plus) button and choose Change Property.
In the Change Property dialog box, select SPAN from the Type of Object drop-down menu.
In the Named Object drop-down menu, select the named span you added to the page.
From the Property drop-down menu, select innerHTML.
In the New Value text box, enter the text you want to display when the user mouses over the image.
Click OK to close the dialog box.
In the Behaviors panel, click the down arrow next to the Change Property behavior and select onMouseOver.
Repeat Steps 3 through 6.
This time, in the New Value text box, enter the original text.
Click OK to close the dialog box.
In the Behaviors panel, click the down arrow next to the new Change Property behavior. This time, select onMouseOut from the drop-down menu.
Preview the file.
This time, the text will change with the roll-over along with the images (Figure 13.35).
Figure
13.35 The second behavior needs to be triggered on onMouseOut.
)
Figure
13.35 For more interesting ways to use rollovers, see Chapter 18, Toolbars, Tricks and Interactive Design.