Css scroll HTML card?

Question

I need to create an html page for use on the CD. Navigation is an HTML map with a set of coordinates. When the user flips the coordinate, I want the image popup to appear next to him. There are 8 map links and 8 corresponding pop-ups.

I could do this easily through jQuery, but the CD will be used mainly in IE. IE does not allow javascript to run locally (without user interaction, which is unacceptable).

Through jQuery, I absolutely positioned the inverse images, but I can't set them visible using CSS with hovering. What is the best method to do this?

Answer 1

, -: hover.

...

HTML

<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

#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; }

, , ( -), JS, .

. IE6, , , , ahref.
: