• 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

    • I always disable animations in Windows using sysdm.cpl and yes, it feels faster. I have also reduced animations in my android phone using dev options.
    • Neowin's servers (hosted in the UK).
    • MacOS isn't Linux, but Proton is modified WINE, and WINE runs on MacOS. They would just need to add something like Box86 or Rosetta support.
    • PicPick 7.4.0 by Razvan Serea PicPick is user friendly and full of features for creating your image, suitable for software developers, graphic designers and the home user. It is an all-in-one program that provides a full-featured screen capture tool, intuitive image editor, color picker, color palette, pixel ruler, protractor, crosshair and even whiteboard. It not only has everything that you need, but it loads fast, and sits quietly in the system tray until needed. This software is provided as freeware for personal use only. In this case, you are granted the right to use this program free of charge. Otherwise, you need to pay for a license for commercial use. PicPick key features: For All Windows (Fully support Windows 11, 10, 8.1, 8, 7, Vista and XP both 32-bit and 64-bit) Multi-language is supported. (MORE 28+) All functions are fully supported on a dual screen environment. No Registry, No access to System folder (you can copy these files to portable USB) Screen Capture Auto-scroll, dual monitors and sound effect are supported Various output to File, Printer, Office programs, External program Sharing to FTP, Web, E-mail, Facebook and Twitter are supported as well Full Screen Active Window Window Control Scrolling Window Region, Fixed Region FreeHand Repeat Last Capture Image Editor Intuitive User Interface Windows Ribbon style Standard drawing, shapes, arrows, lines, text, and etc. Blur, sharpen, hue, contrast, brightness, pixelate, rotate, flip, frame effect and etc. Color Picker and Color Palette various color code type (RGB, HTML, C++, Delphi) Photoshop style RGB/HSV conversion is supported. Pick and Save your favorite color! Screen Pixel Ruler Horizontal and vertical orientation various units (Pixels, Inches, Centimeters) DPI setting (72, 96, 120, 300) colorful gradient skins You don't have to install any other screen ruler softwares. Screen Magnifier Zoom 2x to 10x option Stay on top, smooth display, and sizeable window Screen Protractor Have you seen any screen protractor function in other software? Screen Crosshair For aligning objects in graphics or design applications For calculating relative coordinates on screen Some prefer to use this tool than a pixel-ruler. Whiteboard For giving a presentation or just drawing something on screen PicPick 7.4.0 changelog: Added support for saving in WebP file format Added horizontal scrolling in the Image Editor with Shift and mouse wheel Fixed control capture failing to detect specific windows Fixed focus loss during delayed active-window captures. Download: PicPick 7.4.0 | 74.9 MB (Free for personal use only) Download: Portable PicPick 7.4.0 | 73.3 MB View: PicPick Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Stellarium 25.2 by Razvan Serea Stellarium is a free open source planetarium for your computer. It shows a realistic sky in 3D, just like what you see with the naked eye, binoculars or a telescope. It is being used in planetarium projectors. Just set your coordinates and go. Stellarium key features: Realistic simulation of the sky, sunrise and sunset Default catalogue of over 600,000 stars Downloadable additional catalogues for up to 210 million stars Catalog data for all New General Catalogue (NGC) objects Images of almost all Messier objects and the Milky Way Artistic illustrations for all 88 modern constellations More than a dozen different cultures with their constellations Solar and lunar eclipse simulation Photorealistic landscapes (more are available on the website) Scripting support with ECMAScript (a few demo scripts are included) Extendable with plug-ins: 8 plug-ins installed by default, including: artificial satellites plug-in (updated from an on-line TLE database) ocular simulation plug-in (shows how objects look like in a given ocular) Solar System editor plug-in (imports comet and asteroid data from the MPC) telescope control plug-in (Meade LX200 and Celestron NexStar compatible) The major changes of this version: Many changes in support of sky cultures Added 2 new plugins: Mosaic Camera and Custom Nebula Textures Many improvements in Core Updates in sky cultures (include new one) [full release notes] Download: Stellarium 25.2 (64-bit) | 361.0 MB (Open Source) View: Stellarium Home Page | Other Operating Systems | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      648
    2. 2
      Michael Scrip
      224
    3. 3
      ATLien_0
      222
    4. 4
      Xenon
      146
    5. 5
      +FloatingFatMan
      143
  • Tell a friend

    Love Neowin? Tell a friend!