A remote rollover is a hover event that triggers a display change somewhere else on the page. This is accomplished by nesting one or more elements inside an anchor link. Then, using absolute positioning, you can position the nested elements individually. Despite being displayed in different places, they are both contained within the same parent anchor, so will both react to the same hover event. As such, when you hover over one element, it can affect the style of another element.
When the links are hovered over, the image hotspots will be outlined. Conversely, when you hover over the hot areas on the picture, the text links will highlight.
The HTML for this example is similar to that of the basic CSS image map example. However, you will need two additional spans: one wrapped around the link text, and one empty span to act as the hotspot. This will allow you to position the link text beneath the image and the hotspots over the respective people.
<div id="pic">
<img src="images/group-photo.jpg" width="640" height="425" alt="onion, banana, pineapple " />
<ul>
<li class="oni">
The first thing you need to do is set the position property of the hotspots to absolute, and then specify their dimensions. In this example each hotspot is the same size, but you could set different sizes on each one if you wanted. Just as in the previous technique, this will position all of the anchors at the top-left corner of the image. You can then position each hotspot over the relevant person in the image, using the top and left positioning properties.
#pic a .hotspot {
width: 100px;
height: 120px;
position: absolute;
}
Similarly, the spans containing the link text are also positioned absolutely and are given a width of 15ems. They too are positioned in relation to the enclosing list, in this case visually below the list using negative bottom positions:
#pic a .link {
position: absolute;
width: 15em;
}
Similarly, to change the color of the text when either the text or the hotspot span is hovered over, you need to change the style on the span when the parent anchor is hovered over:
#pic a:hover .link {
color: #0066FF;
}
If you test this example, it works perfectly in Safari and Firefox. If you hover over a person’s name, the link text changes color, and a box appears over that person in the picture. The same happens if you hover over the person in the image.
|
