• 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

    • These SSDs from Crucial, SanDisk, and Western Digital are selling at great prices by Fiza Ali Amazon US is currently offering a wide range of solid‑state drives at attractive prices, covering both internal and portable options to meet diverse storage needs. So, whether you're looking to expand your laptop's storage, speed up your desktop, or carry large files on the move, these discounts make it easier to secure reliable SSD technology without exceeding your budget. The 1TB Crucial BX500 is a 2.5‑inch SATA III solid‑state drive offering a maximum interface speed of 6Gb/s. In terms of performance, the drive achieves sequential read speeds of up to 540MB/s and sequential write speeds of up to 500MB/s. It is rated for an endurance of 360TB total bytes written (TBW). 1TB Crucial BX500 Internal SSD: $56.99 (Amazon US) - 40% off The 2TB Crucial P3 Plus is an NVMe SSD in the M.2 2280 form factor, utilising a PCIe Gen 4 ×4 interface. It delivers sequential read speeds of up to 5,000MB/s and sequential write speeds of up to 4,200MB/s. Rated for 440TBW, it offers durable performance for everyday and professional use alike. 2TB Crucial P3 Plus NVMe SSD: $113.99 (Amazon US) The 4TB Crucial X10 portable SSD features a USB 3.2 Gen 2x2 interface, supporting data transfer speeds of up to 20Gb/s. The drive delivers sequential read speeds of up to 2,100MB/s, making it suitable for tasks such as video editing, file transfers, and system backups. 4TB Crucial X10 Portable SSD: $246.99 (Amazon US) - 38% off The 2TB SanDisk Extreme Portable SSD comes equipped with a USB 3.2 Gen 2 interface (backwards compatible with USB 3.0 and USB 2.0). It delivers sequential read speeds of up to 1 000 MB/s, promising rapid file transfers and game loading times. Designed, tested, and approved for use with PlayStation 5 consoles, this rugged SSD lets you archive and restore game libraries rapidly. It is IP55‑rated for water and dust resistance as well. 2TB SanDisk Extreme Portable SSD: $178.01 (Amazon US) - 26% off The 1TB Western Digital Blue SA510 SSD connects via SATA III (6Gb/s). It delivers sequential read speeds of up to 560MB/s and write speeds up to 520MB/s, with random performance rated at 90,000 IOPS for reads and 82,000 IOPS for writes. Built on WD’s 3D NAND technology, it carries a 400TBW endurance rating and is backed by a five‑year limited warranty. Finally, it operates safely between 0°C and 70°C (–55°C to 85°C when powered down). 1TB Western Digital WD Blue SA510 Internal SSD: $63.17 (Amazon US) - 26% off 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. You can also check out other SSD deals here. For hard disk drives, you can head over to our HDD deals section to see if anything from there matches your requirements. Make sure you also browse through Amazon US, Amazon UK, and Newegg US to find some other great tech deals. As an Amazon Associate, we earn from qualifying purchases.
    • Look at the fingers especially round the cups, you’d think A needs to add the I together
    • There are too many people doing nothing and just cruising at MS because of how the previous culture was (rest and vest).
    • AMD Ryzen AM4 16-core 5900XT processor has never been priced cheaper by Sayan Sen While AMD's newest processor platform with DDR5 and PCIe 5.0 goodness is AM5, the preceding Socket AM4 continues to be a great option for gamers shopping on a lower budget. One of the most powerful AM4 desktop chips, the 16-core Ryzen 9 5900XT, is currently priced at the lowest ever at just $230 (purchase links down below). The Ryzen 7 5900XT is based on the Zen 3 architecture supports DDR4, PCIe Gen4, and offers very good performance in both gaming and productivity. While users may not expect the same level of gaming throughput or latency improvement as the 5800X3D, it is certainly possible that titles that utilize more than 16 threads will favor the 5900XT over the 5800X3D. And the 5900XT has plenty of L3 cache as well at 64 MB. So while not 3D stacked V-cache, it should still be a decent gaming chip. And all that cache as well as cores/threads will be excellent for non-gaming tasks of course. The CPU has a base clock of 3.3 GHz and boosts up to 4.8. It has a TDP of 105 watts so the available power envelope certainly helps with that. It can tolerate temperatures of up to 90 °C and there is no boxed cooler with it. So you need an aftermarket one, ideally a 280 mm or 360 mm AIO liquid cooler or an excellent air cooler. Also since this is a 16-core 105-watt chip, make sure to run it on an AM4 board that has good quality VRM and cooling with lots of power (ideally an X570 motherboard). Another consideration is that it does not have integrated graphics so you need a separate dedicated GPU for display out. Get the AMD Ryzen 9 5900XT at the links below: AMD Ryzen 9 5900XT - No Integrated Graphics Desktop CPU Processor - 100-100001581WOF: $229.99 (Amazon US) || : $279.00 (Newegg US + Corsair 32GB DDR4-3200 RAM) 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

    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      681
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      207
    4. 4
      +FloatingFatMan
      172
    5. 5
      Steven P.
      143
  • Tell a friend

    Love Neowin? Tell a friend!