Featured post
HTML map with css rollovers? -
i have create html page use on cd. navigation html map co-ordinates set. when user rolls on co-ordinate, want image popup appear beside it. there's 8 map links, , 8 corresponding image popups.
i through jquery, cd used on ie mainly. ie doesn't allow javascript run locally (without user interaction, isn't acceptable).
through jquery absolutely positioned rollover images, can't set them visible through css hover. what's best method approach this?
you try serious styling effects based on pseudo-class of :hover.
without knowing markup 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 text</div></li> <li id="location-02"><span>map text</span> <div class="item">additional pop text</div></li> <li id="location-03"><span>map text</span> <div class="item">additional pop text</div></li> .... </ul> </div>
css code
#mapwrapper {position:relative;} /* include width, height , bg imagery */ ul#map, #map li {margin:0;padding:0;list-style-type:none} /* reset list standard in different browsers */ #location-01 {position:absolute;} /* include with, height , position top-left items required */ #location-02 {position:absolute;} /* include with, height , position top-left items required */ etc... #map li .item {display:none; } /* hide pop text, include defaults position based on location of li */ #map li:hover .item {display:block;} /* show pop text on hover of li*/ /* note: if need position each pop item uniquely use like... if do, remember move :hover effect last item in style sheet */ #map li#location-01 .item {display:none; }
hope helps out, have had similar map online (not cd) wanted without js , easiest way so.
note: if need offer ie6 support, best changing hover based on ahref instead.
eg: map text additional pop text
- Get link
- X
- Other Apps
Comments
Post a Comment