• 0

visible on hover image map not working Safari/Chrome


Question

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.

10 answers to this question

Recommended Posts

  • 0

I don't know if I'm right here as its a bit late and I'm blooming tired, but of course its only going to show while the mouse is on it, as it is being set to only be shown upon hover.

Now I cant remember if it is because IE/FF interpret it wrong which is why it stays, but the moment you move the mouse off, its no longer going to be set under the hovered state so it should by design disappear.

Again if I'm wrong, I'll stand by the 3am and tired excuse :p

  • 0

no no I appreciate your response and of course some things may not look clear from that code without actually trying it out.

The problem only comes up with an image map. If i just have this it will work perfectly in all browsers:

<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" href="blahblah" alt="" />
</div>
</div>

With the above code I can move my mouse over the newly visible image option5_big.jpg and click on it to go to the link. This is how all the other menu options are working currently.

However once I introduce the image map to the class="visible" div the interaction with that div falls apart in Safari and Chrome but continues to work in IE and FF

  • 0

@ cupcakes - I'm not sure if that is suitable. I want to be able to change the menu options and their respective images depending on the needs of the site.

let me explain my layout with a picture...

33vf2it.jpg

So this is basically the entirety of the main page. The top half of the image i mean. You hover over one of the menu options on the left and the space to the right is filled with the relevant content. In this case an image with a link to more information etc.

When going over one of the options i want it to show the image map. The image map is roughly mapped like i have shown in the image. This image map is to appear in the div class="visible" just like all the other content.

In FF/IE this is working perfectly, Safari/Chrome it is not. I am unable to put my mouse focus over the image map. The other options work fine as they are not image maps, just images.

  • 0

Yeah, I'm pretty sure you are making this more difficult for yourself then it really has to be.

Not sure why you even need an image map to begin with when you can easily use z-index to layer your CSS. Anyway just look at it you can easily utilize a jQuery accordian and in each "option" have the image set as a background with any pertinent links over it. Easy peasy.

  • 0

well it was really easy until Safari and Chrome decided to not play along, haha.

I will have a look at this jquery accordian and see how I go. I was wanting to learn more about jquery anyway :) Thanks for your help.

I am still curious though about what is it that is making Safari and Chrome unhappy, I'm used to IE being the unhappy one.

  • 0

sigh... i implemented the jquery accordian method but not colorbox isn't working. going to try and implement it from scratch again... this has been a nightmare. I have spent the last 4 or 5 hours (on and off) to end up with a site that is more broken than how i started.

EDIT: Completely redoing colorbox has solved the problem. looks like everything is working as it should. Thanks for all the help.

  • 0

thanks cupcakes for all the help, i am using the same version that i was before that wasn't working (latest jquery compatible 1.4.3), i just deleted the script and references to it and started again. For some reason it is working. I can only assume somewhere i had lost a ">" or similar in the process of adding the accordian. Now I just need to fix up the rest of my links to work with colorbox again.

Appreciate all the help, the accordian method words a treat.

EDIT: with a little more looking all is working across all browsers now. thanks :D

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Indiana Jones and the Great Circle: The Order of Giants DLC launches this September by Pulasthi Ariyasinghe The Xbox Games Showcase gave a look at the next Indiana Jones adventure today. MachineGames showed up with a trailer for the first DLC pack coming to Indiana Jones and the Great Circle: The Order of Giants. Set in Italy, the fresh story will introduce new locations, puzzles, enemies and more. Watch the reveal trailer above. This Indy journey will be taking place during the main campaign and dive deeper into the tribe of giants, Nephilim Order, that players see in the base game. The story will kick off with Indiana Jones offering help to a young priest named Father Ricci, who is attempting to track down a mysterious artifact. The resulting journey expands into this separate storyline that takes the player beyond Vatican City to explore Rome's streets and the crypts beneath it. “One of the most satisfying parts of developing Indiana Jones and the Great Circle was the opportunity to create the Nephilim Order, the secret society of giants formed by descendants of fallen angels working to atone for their ancestral sins,” says Production Director John Jennings. “That story spans thousands of years and this DLC has given us the opportunity to develop further upon their lore and look at other aspects not covered in the initial story campaign. There’s something new and unexpected to tell here for fans of the game, and we can’t wait for people to be able to play it for themselves.” The Indiana Jones and the Great Circle: The Order of Giants DLC will be releasing on September 4, 2025. It will be available on PC, Xbox Series X|S, and PlayStation 5. Premium Edition, Premium Upgrade, Collector’s Edition, and Collector’s Bundle owners will be receiving the DLC for no extra charge at launch.
    • Could we have a desktop version of this lightweight bloat free Windows 11?
    • So they admit that Windows 11 is slow and bloated. Good to know!
    • Real handheld Xbox hardware was canceled, this is just a PC with a screen and controller built-in.
    • Amazon Deal: JBL BAR 1000 7.1.4, BAR 700 5.1 Dolby Atmos wireless subwoofer soundbars by Sayan Sen If you are in the market for an audio system and are after smaller bookshelf speakers delivering highly accurate sound, then take a look at KEF and Polk Audio's Q Concerto Meta and Reserve R200 speakers, respectively, as both of them are up for sale at their lowest ever prices. However, if you are more into shaking your house, which is not possible without a subwoofer, then Samsung has its Q900F, Q800F, and Q600F soundbar systems with wireless subwoofers at the lowest prices. These are the latest 2025 models, and you can take a look at them in this article here. JBL BAR 1000 For those looking for additional options, JBL's BAR 1000 and Bar 700 are also available. The former has hit its lowest ever price too, while the latter is back to its cheapest (purchase links down below). JBL claims that its BAR 1000 model goes as low as 33Hz which is crucial for movie-watching or even some genres of music. The 10-inch subwoofer is rated at 300 watts of RMS power. The total power output of the system is 880 watts at THD (total harmonic distortion) of 1%. JBL BAR 1000 rear view Unlike the 7.1.4 JBL BAR 1000, the BAR 700 is a 5.1 system which means it lacks true Dolby Atmos, but it should still provide an Atmos-like experience. DTS:X is also not supported. The BAR 700 is rated at 620 watts. It is good to see some power ratings, as companies like Samsung, Sonos, Bose, and more tend not to mention them all too often nowadays. Interestingly, both the BAR systems have similarly-specced subwoofers so if bass is what you are looking for and do not care about the Atmos experience so much, you can opt for the BAR 700 too. Get them at the links below: JBL Bar 1000: 7.1.4-Channel soundbar with Detachable Surround Speakers, MultiBeam™, True Dolby Atmos®, and DTS:X®, Black: $799.95 (Shipped and Sold by Amazon US) JBL Bar 700: 5.1-Channel soundbar with Detachable Surround Speakers and Dolby Atmos®, Black: $549.95 (Amazon US) + you also get free 90-day Amazon Music This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
  • Recent Achievements

    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
    • First Post
      viraltui earned a badge
      First Post
    • Reacting Well
      viraltui earned a badge
      Reacting Well
    • Week One Done
      LunaFerret earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      475
    2. 2
      +FloatingFatMan
      264
    3. 3
      ATLien_0
      236
    4. 4
      snowy owl
      228
    5. 5
      Edouard
      174
  • Tell a friend

    Love Neowin? Tell a friend!