I have a menu and on hover of each menu option a div is made visible to the immediate right of the menu. most menu options are simply a single image with a link to another page. You hover over the menu option then move the cursor onto the now visible div to interact with it.
However one of the menu options needs to show an image map in the div. In both firefox and IE it is possible to hover over the menu option then put your cursor over the now visible image map and select the correct link. However in Safari and Chrome as soon as your cursor moves off the menu option to over the image map div it stops being visible.
Here is the code for the image map section i have in a test set up.
As I said the menu works perfectly in firefox and IE but not safari or chrome. I realise i cloud slice up the image and do it that way but if possible I'd like to find out why Safari and Chrome are playing up.
Question
fukachu
Hi all,
I have a menu and on hover of each menu option a div is made visible to the immediate right of the menu. most menu options are simply a single image with a link to another page. You hover over the menu option then move the cursor onto the now visible div to interact with it.
However one of the menu options needs to show an image map in the div. In both firefox and IE it is possible to hover over the menu option then put your cursor over the now visible image map and select the correct link. However in Safari and Chrome as soon as your cursor moves off the menu option to over the image map div it stops being visible.
Here is the code for the image map section i have in a test set up.
HTML
<div id="main_menu"> <div id="option5"> <img src="/images/main_menu/option5.jpg" alt="" /> <div class="visible"><img src="/images/main_menu/option5_big.jpg" usemap="#sales" alt="" /> <map id="sales" name="sales"> <area shape="rect" coords="445,46,635,107" href="/files/Flyer.pdf" alt="Past Sale Flyer" /> <area shape="rect" coords="445,158,635,217" class="cbyoutube" title="Opening Day Rush" href="*youtube link snipped*" alt="Opening Day Rush" /> <area shape="rect" coords="114,254,522,325" href="/files/cupweekend.pdf" title="Cup Weekend Sale Flyer" alt=""/> <area shape="default" nohref="nohref" title="Default" alt="Default"/> </map></div> </div>CSS
#main_menu { position: relative; width: 886px; height: 354px; display: block; margin-top: 1px; margin-left: 15px; margin-bottom: 1px; } #option5 { position: relative; display: block; width: 249px; height: 140px; } #option5 div.visible { display: none; } #option5:hover div.visible { position: absolute; top: 0; left: 250px; height: 354px; width: 636px; display: block; }As I said the menu works perfectly in firefox and IE but not safari or chrome. I realise i cloud slice up the image and do it that way but if possible I'd like to find out why Safari and Chrome are playing up.
Link to comment
Share on other sites
10 answers to this question
Recommended Posts