# Image Map not working in Firefox after a display none/block switch



## slaydone (Feb 12, 2014)

I have a set of links that on mouseover change the content in a div beside of the links. Everything works great EXCEPT the image map. The div that holds the image map is set to "display:none" in the CSS when the page loads and then on relevant mouseover the jquery flips it to "display:block". Firefox doesn't like this. The initial display:none is throwing it for a loop. IE8 even handles it just fine. I've verified that removing the initial display:none does indeed make Firefox start working again. Suggestions? I've tried adding a style of "display:block" to both the image calling the map and the map itself in a futile attempt to tame it.


----------



## JiminSA (Dec 15, 2011)

Hi slaydone and welcome to TSG ...
Could you post a link or some code please? (guesswork, otherwise)


----------



## slaydone (Feb 12, 2014)

Here is a snippet of the code in js fiddle - http://jsfiddle.net/YLYP3/

The second link has a image map (works inside fiddle - Does NOT work in Firefox)

Granted I have the code inside some other divs for positioning (just a simple float left/float right - no absolutes or relatives or anything).

If I remove the display:none from the div holding the image map then the map works perfectly - BUT I need it hidden until it is shown via mouseover.


----------



## JiminSA (Dec 15, 2011)

Just for convenience ...

```
[URL]Overview[/URL]
[URL]Global Capabilities[/URL]
[URL]Newsroom[/URL]

[B][SIZE=14]Overview[/SIZE][/B]

Text here...

[B][SIZE=14]Global Capabilities[/SIZE][/B]

[IMG]http://www.ccl.org/leadership/impact/images/block4.jpg[/IMG]

[B][SIZE=14]Newsroom[/SIZE][/B]

And somre more text...
```


```
$('a.category').mouseover(function(){
		$('.levels').hide();
		$('#level'+$(this).attr('target')).show();
	});
```


```
.category{font-weight: bold; margin:0; text-transform:uppercase; font-size:14px; text-decoration:none;}
.levels{display:none;}
```


----------



## JiminSA (Dec 15, 2011)

Well slaydone, try as I may, I cannot reproduce your problem in my version of Firefox (27.0.0.5140) - perhaps yours is older?
BTW Can I ask why you need a targeted link (the hovered 'show' remains static as you don't mouseout, which enables map processing)?


----------



## slaydone (Feb 12, 2014)

Using version 25 of Firefox. Doesn't work in Chrome version 32 either. I have the targets on the link so I can show the correct content in the div on mouseover. I needed an attribute that I could grab and pass to flip the divs on. I don't want mouseout since I want the div to stay visible so it can be clicked on.


----------



## JiminSA (Dec 15, 2011)

Hmmm ... despite the older versions things should be working with your script - I can find nothing wrong with it
Perchance is Javascript disabled on your browsers?


----------



## JiminSA (Dec 15, 2011)

also are you linking to jquery libraries ok?


----------



## slaydone (Feb 12, 2014)

Yes, linking fine to jquery. Yes, javascript enabled. I have a feeling that one of the other jquery scripts running on our site is causing issues but I can't narrow it down and I can't lose the scripts so I'm stuck. At this point in time I'm throwing out the image map.


----------



## JiminSA (Dec 15, 2011)

Could you perhaps post a link to your site? Or is it not yet live?


----------

