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
精彩评论