Creating image map rollovers
Sometimes you want to accomplish some rollover effects but the image you're working with isn't easy to slice into rectangular shapes. With GoLive, this isn't a problem, since you can trigger rollover effects using areas in an image map.
Place your image map and define the areas [for information on how to make an image map, see the manual]. In the example below, I have made a small image map with two areas.
 
First I'll show you how to make a rollover so that the image map changes itself. To do this, you must name your image. You can do this in the Name field, in the Spec Tab of the Clickable Image Map Inspector.
Under the Map Tab, type in the page you want to Link the image to. In this example I use "#", which targets the same page [because I want you to stay here and finish reading my tutorial =)].
Now select the area that you want to trigger the rollover with.
Click the Actions Tab of the Clickable Image Map Inspector. Add a Mouse Enter action, and choose Set Image URL from the Action > Image popup menu.
From the Name popup, select the name you gave to your image map. Then choose the image you want to appear when you move your mouse within the area.
Repeat the process for Mouse Exit, choosing instead the original image as your link. Now when you rollover the sploch to the left, its texture will change! Try it:
Using this method, you can make areas that surround eachother or have non-rectangular shapes perform rollovers! This can look very snazzy if you use it wisely. Below is the rollover with both areas triggering a change:
Now, to trigger another image using these rollovers, use the same principles explained in the Remote Rollovers Tutorial. Simply add more Set Image URL actions to Mouse Enter / Mouse Exit. You can have as many Set Image URL actions as you want, but remember each one takes up system resources, and each one makes your design more and more busy-looking. Don't go crazy with them! Below is one more example, the image map changes not only itself, but also the image to the right. Hover around it and see:
The image to the right is a conventional rollover. You can learn more about these in the Conventional Rollover Tutorial.
[06/04/99] - Reader Charles Newbury wrote in and let me know that sometimes there is a problem with getting an image map rollover's links to work. Sometimes you click and you "just site there." No problem! Just add a Mouse Enter action, choosing Goto Link from the Action > Link popup menu.
Now in the fields that appear, enter the link you want to send your users to when they click in that area.
|
