Question

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 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?

Answer 1

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