• 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

    • GOG store introduces One-Click Mods feature with support for Fallout: London and others by Pulasthi Ariyasinghe The GOG store just announced a new feature to its platform that it is calling a new era for modding. Revealed at the PC Gaming Show, GOG One-Click Mods functions exactly like it sounds like, letting PC gamers browse, install, and play community creations easily and without jumping through hoops. "Mods are an essential part of video games preservation, allowing you to relive your favorite stories in countless possible ways," said the GOG team today. "Mods management, however – is not for everyone. Digging into game files, installing requirements, restarting the game thousands of times, making it crash every time… But no more." Unlike other modding platforms that let anyone upload their creations and let the user work out the details, GOG's version is a curated experience. By working directly with the modding teams, the popular DRM-free store's staff will be making sure that each of the mods available works instantly with the game, with no need for additional research or add-on installations. "From bug fixes, restored cut scenes, quests and characters, to completely freshly-made new content – we teamed-up with these community-driven projects creators to offer you this list of handpicked Mods," added the company. "Combining our strengths, these are now accessible right away, already installed within the base game for the smoothest experience!" Here are some of the mods available right now on the new platform: Horn of the Abyss for Heroes of Might and Magic 3: Complete. Horn of the Abyss is an expansion for Heroes of Might and Magic III that adds new factions, campaigns, creatures, artifacts, and numerous quality-of-life improvements, such as a working multiplayer lobby system. Phobos mod for DOOM 3. The Phobos Mod for DOOM is a prequel to the original game, delivering a narrative-driven, classic-style FPS experience with modern enhancements, set during the UAC's initial experiments on Mars' moon Phobos, adding many new gameplay hours. Vampire: The Masquerade – Bloodlines Unofficial Patch for Vampire: The Masquerade - Bloodlines. The Vampire: The Masquerade – Bloodlines Unofficial Patch does not only fixes numerous bugs left unresolved by the original developers but also restores and enhances cut content such as quests, levels, characters, and dialogue. Fallout: London One-Click experience for Fallout 4. You already had a chance to experience how great Fallout: London is – an alternate standalone storyline set in the United Kingdom, during the apocalypse events from Fallout 4. Now though, you can boot it with just one click – no launchers, no extra steps, just pure fun. Following that, the GOG team is working on introducing support for the Skyblivion total conversion mod when it releases later this year. This will let those who own The Elder Scrolls V: Skyrim Anniversary Edition on the platform install and jump into the modded Oblivion experience on the Skyrim engine easily. Check out the newly set-up mods platform on the GOG store by heading over here.
    • Anno 117: Pax Romana gets a November release date as Ubisoft unveils Governor's Edition by Pulasthi Ariyasinghe Ubisoft's long-running city-building and management franchise, Anno, was first revealed to be receiving another entry back in 2024. While it has taken some time, Anno 117: Pax Romana finally received a firm release date today during the 2025 PC Gaming Show event just as pre-orders open up. Catch the latest cinematic trailer above. Anno 117: Pax Romana lands on November 13, 2025, letting fans loose on the Roman settlement-building venture. The game's first gameplay was revealed just a few weeks ago as well, which you can watch by heading here. As new features, the title is adding a province selection mechanic at the start of each game, a religion system, a research tree, land combat, modular shipbuilding, and, most importantly, diagonal roads and building construction. Those who pre-order the game will also receive a Builder Pack from today. This will carry the Wolf player sigil, a matching battle standard, the Town Crier statue, as well as the Capitoline Wolf statue. At the same time, a Gold Edition is available for pre-order that bundles the Year 1 Pass with the base game. This will carry access to three DLC packs, and judging by the teaser image, it looks like players will be heading to Egypt for new adventures as part of the expanded content. For fans who may want something a little more comprehensive, Ubisoft also unveiled the Anno 117 Governor’s Edition. This special edition comes with these collector's items and digital goodies: Collector's items: Amphitheatre 3D Puzzle (36 x 31 x 13 cm) 84-page Artbook featuring concept art and behind-the-scenes content - cover design elected by community! Forged Anno Symbol (approx. 7 cm) Albion & Latium Coins Steelbook® case - design elected by community! Town Crier's Letter (21 x 30 cm) Tesserae Works Blueprint (42 x 59 cm) 3 Lithographs (30 x 15 cm) Digital Content: Base Game Year 1 Pass, including: 3 upcoming DLCs Additional in-game content The Builder Pack: 3 exclusive ornaments 1 player sigil Anno 117: Pax Romana is slated to hit Steam, Ubisoft Connect, Epic Games Store, Xbox Series X|S, and PlayStation 5 platforms. Pre-orders are now available starting at $59.99 for the standard edition. Ubisoft+ subscribers will also receive the title as a day-one drop. In addition to the base game, members will also receive access to the upcoming DLC packs at launch for no extra cost.
    • Once the first went to a full version number, some just egregiously long numbers with every iteration of compilations/dates/times... what have you, it was a landslide. Long gone are the days of IE version 6, 7... now it's Edge 137.0.3296.16. So, why not iOS 2026.18.8778.322.10.800? Shocked that Edge isn't 2025.137.0.3296.16... seriously. When Samsung went from S10 to S11, to S20... to S21... I thought they were just doing new iterations of the same/similar models, then the next would have logically been S30/S31... but nope. Oh well... better things to think about then version numbers, leave that to the devs.
    • The problem -- as pointed to by the PowerShell output I quoted above -- was that for some reason it couldn't download the NuGet provider. Here's what did work: (1) Download the raw nupkg file (set-inetpubfolderacl.1.0.0.nupkg) from https://www.powershellgallery....s/Set-InetpubFolderAcl/1.0; (2) Extract (e.g., via 7-Zip) the Set-InetpubFolderAcl.ps1 file into C:\Program Files\WindowsPowerShell\Scripts; (3) Run the script via PowerShell as described in the quite thorough instructions given at https://www.windowslatest.com/...t-on-windows-11-windows-10/ . That worked for me, or seemed to. Oh, relief!
    • I like the show's/comic's violence being represented here, as so many others avoid it. Timing is key with this release due to the Marvel Tokon title.
  • Recent Achievements

    • First Post
      George Almeyda earned a badge
      First Post
    • Reacting Well
      BlakeBringer earned a badge
      Reacting Well
    • Reacting Well
      Lazy_Placeholder earned a badge
      Reacting Well
    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
  • Popular Contributors

    1. 1
      +primortal
      469
    2. 2
      +FloatingFatMan
      266
    3. 3
      ATLien_0
      236
    4. 4
      snowy owl
      218
    5. 5
      Edouard
      171
  • Tell a friend

    Love Neowin? Tell a friend!