开发者

HTML map with css rollovers?

I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.

I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user开发者_如何学C interaction, which isn't acceptable).

Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?


You could always try some serious styling effects based on the Pseudo-class of :hover.

Without knowing your markup I would tackle along these lines...

HTML Markup

<div id="mapWrapper">
<ul id="map">
 <li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 <li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 <li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 ....
</ul>
</div>

CSS Code

#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/

/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }

Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.

Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜