• 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

    • Microsoft explains how Xbox Ally runs a lightweight bloat-free Windows 11 by Sayan Sen Microsoft today announced new AMD Ryzen-powered Xbox Ally gaming handhelds. There is a duo of these new devices, and they run Windows 11. The version of Windows 11 (Home) running on these new handhelds is specially optimized, says Microsoft. Jason Beaumont, the Vice President of experiences at Xbox, said that the new Xbox Ally consoles are essentially running an optimized and bloat-free Windows 11. He said: "We were able to take people who have been working on the Xbox OS for 20 years or more and have them work directly on the Windows codebase and start reimagining what that operating system looks like for this form factor. When the player boots into the full-screen experience, there is a whole bunch of Windows stuff that doesn’t get loaded. We’re not loading the desktop wallpaper, the taskbar, or a bunch of processes that are really designed around productivity scenarios for Windows." Roanne Sones, corporate vice president of gaming Devices and ecosystem at Xbox added: "We’ve reduced many notifications and pop-ups, and we will continue to listen to feedback from players to make continued improvements." Brianna Potvin, principal software engineering lead at Xbox, further added some details about memory optimizations: "This isn’t surface-level changes, we’ve made significant improvements. Some of our early testing with the components we’ve turned off in Windows, we get about 2GB of memory going back to the games while running in the full-screen experience. If you’re booting your device into the full-screen experience and you’re putting it down and it’s going to sleep, it draws one-third of the idle power draw than if it was booting the same device into the [Windows] desktop experience." Via: The Verge
    • Trayy 1.01 by Razvan Serea Trayy is an open-source Windows application that enhances the system tray by allowing users to integrate web applications, shortcuts, and other utilities directly into the tray for quick access. Inspired by RBTray, it supports Progressive Web Apps (PWAs), enabling seamless integration of modern web-based tools. Trayy offers a lightweight and minimal interface that minimizes desktop clutter and maximizes productivity by providing easy access to frequently used applications without interrupting workflow. Designed for simplicity, Trayy enables users to launch apps and access notifications with a single click. It allows for custom tray icons, app organization, and offers support for system tray management. The application is highly configurable and can be easily installed without complex setup processes, making it suitable for both novice and advanced users looking to streamline their desktop environment and optimize their workspace with minimal overhead. Tested on Windows 10 and 11 with support for toast notifications. Windows Defender may flag Trayy with a false positive, but there is no cause for concern. The application is safe to use and fully open-source, allowing anyone to inspect the code for transparency. Trayy 1.01 changelog: Fixed a bug that was causing all Chrome/Edge windows to close when closing only one window Download: Trayy 1.01 | 383 KB (Open Source) View: Trayy Website | Getting Started | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Yeah, I can think of very few venders who implemented it. Still, kind of a shame to remove the feature, even if no one was using it.
    • At Fate's End announced by Spiritfarer studio, an action game about fighting family by Pulasthi Ariyasinghe Thunder Lotus Games appeared at the Xbox Games Showcase today with a surprise game announcement. That may be a familiar name for indie game enjoyers, as it's the studio behind titles like Jotun, Sundered, Spiritfarer, and most recently, 33 Immortals. Now, the company is developing another narrative-focused action game titled At Fate’s End, but with a twist. The debut trailer is above. The title focuses on Shan, a divine-sword-wielding princess that has to confront her estranged siblings in "intense, emotionally charged duels." It's not all about sword fighting, as the studio says that the grand battles against family members will be won through dialogue, psychological insight, and hard-won knowledge of shared history. “With At Fate’s End, we’re taking everything we learned from Spiritfarer — that rich emotional core, that interplay of mechanics and narrative — and pushing it into thrilling new territory,” said Nicolas Guérin, Creative Director at Thunder Lotus. “This is a more intense, more action-driven game, but no less intimate. It’s about how families break apart — and how they might come back together.” Here are the key features listed by the developer: Dual Combat System: Master a blend of fast-paced and tactical swordfighting and clever, choice-driven dialogue battles. Narrative Skill Tree: Grow your abilities through your familial connections and learn to weaponize your knowledge. Emotional Encounters: Every duel is a pivotal emotional climax, shaping both the story and your relationships. Multiple Endings: Your choices forge your family’s future — or doom it. Stunning World to Explore: Discover a fantastical realm, beautifully crafted with Thunder Lotus’ signature art style. At Fate's End is coming out sometime in 2026 for PC (Steam, Microsoft Store, and Epic Games Store), Xbox Series X|S, and PlayStation 5. It will also be a day-one Xbox Game Pass release.
  • 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
      480
    2. 2
      +FloatingFatMan
      264
    3. 3
      snowy owl
      232
    4. 4
      ATLien_0
      231
    5. 5
      Edouard
      173
  • Tell a friend

    Love Neowin? Tell a friend!