• 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

    • This was cool back in the day when done properly - loved having icons of specific devices.
    • Microsoft quietly burying a massive Windows 7 hardware driver feature as Windows 11 kills it by Sayan Sen Last month Microsoft announced a big update for Windows hardware drivers. The company declared that it was killing Windows Device metadata and the Windows Metadata and Internet Services (WMIS). For those wondering what it is, device metadata, as the name suggests, is the collection of additional, user-facing information that an original equipment manufacturer (OEM) provides about a hardware device. The feature was introduced with Windows 7 and can include stuff like icons, logos, descriptive texts, among other things, that help the Windows UI display details about such devices in places like Task Manager or Device Manager. This was a huge deal back in the day when Windows 7 debuted. The company called the feature "Device Stage" and Microsoft described it as a "new visual interface" that essentially worked like a "multi-function version of Autoplay where it displays all the applications, services, and information related to your device." It is often considered synonymous with the Windows "Devices and Printers" Control Panel applet. Neowin did an in-depth overview of the feature when it first launched which you can find in its dedicated article here. The Windows OS was able to obtain the device experience metadata from the WMIS, but now that the feature is being deprecated, Microsoft has begun removing information about Device Stage from its official support documents. Neowin noticed while browsing that a support article regarding automatic Windows hardware drivers was updated for Windows 11 and 10 sometime last year after the release of Windows 11 24H2. Previously, this article was geared for Windows 7 and was much longer. It also contained information about Device Stage, which, as mentioned above, was a headlining feature on Windows 7. In the said article, the section "If Windows can't find information about your device in Device Stage" has been deleted. You can find the archived version of the support page here. Aside from shortening the amount of information on the page, Microsoft has also added some more details on it. The company has now tried to define what the Microsoft Basic Display Adapter is, how updating drivers through Device Manager works, as well as a thorough and detailed troubleshooting section for common hardware driver errors on Windows, including one for USB-C. You can find all the new details on the updated support page here on Microsoft's website.
    • Sounds creepy to say the least. Don't need nor want AI having access to my history. They're claiming it to be an "offline" model now, but how can we guarantee they don't go behind our backs and change that?
    • Exactly! Without those fundamentals you've mentioned, Democracy is literally just Demonstration of Crazy, nothing to be proud of in such system.
    • Still I see almost no ads in mobile Edge unlike Chrome. So their browser is much better at blocking ads than Chrome and it is a fact. It even blocks ads on YouTube and you can add simple custom block filters. Also, Edge still support manifest v2 on desktop, so I'll look for another browser when I start seeing ads again.
  • Recent Achievements

    • 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
    • Week One Done
      Ricky Chan earned a badge
      Week One Done
    • Week One Done
      maimutza earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      481
    2. 2
      +FloatingFatMan
      264
    3. 3
      snowy owl
      238
    4. 4
      ATLien_0
      234
    5. 5
      Edouard
      176
  • Tell a friend

    Love Neowin? Tell a friend!