# Solved: image map not working in firefox



## madradgirl (Mar 8, 2011)

Novice in web dev and it's driving me mad.

I created an image map with java script that allows for rollovers, etc. I can view it fine in IE, but it's not working with Firefox. I read the previous post about the map name and ID so I set them both the same and it still doesn't work.

Can anyone help me?

The website that I'm working on is:

www.embersurge.com

Your help will keep me from going insane! 

Cheers!


----------



## Ent (Apr 11, 2009)

I don't know for sure, one thing that strikes me is that you have the same name and ID for the image as you have for the image map, which should normally be impossible.

```
<div class="templatemo_img"><img  src="images/hd3000plus.jpg" alt="header" name="header" width="960"  height="288" border="0" usemap="#header" id="header" href="SD3000.html"  />
                 <map name="header" id="header">
```
Shouldn't it be 

```
<div class="templatemo_img"><img  src="images/hd3000plus.jpg" alt="header" name="header" width="960"  height="288" border="0" usemap="#headerMap" id="header" href="SD3000.html"  />
                 <map name="headerMap" id="headerMap">
```
If not I'll look a bit deeper tomorrow.


----------



## madradgirl (Mar 8, 2011)

I changed it but it didn't make a difference. Can't wait to hear back from you.


----------



## sepala (May 20, 2010)

Hi madradgirl,
could you please post your JS and related HTML here? It will be very easy for us rather than visiting links. Anyway, firefox expect 100% standard JS code, while most other browsers don't.


----------



## ehymel (Aug 12, 2007)

I think the only change you need to make is to move your "default" definition in your imagemap to the end of the list, like so:


```
<map name="headerMap" id="headerMap">
        	        <area shape="rect" coords="789,217,935,269" href="vflash.html" alt="v-Flash" onmouseover="vflash()" onmouseout="main()"/>
       	        <area shape="rect" coords="637,218,786,273" href="cpx3000.html" alt="CPX 3000" onmouseover="cpx()" onmouseout="main()"/>
       	        <area shape="rect" coords="480,216,632,274" href="pj5000.html" alt="ProJet 5000" onmouseover="pj5000()" onmouseout="main()"/>
       	        <area shape="rect" coords="329,219,476,274" href="HD3000plus.html" alt="ProJet HD 3000plus" onmouseover="hdplus()" onmouseout="main()"/>
       	        <area shape="rect" coords="176,217,327,273" href="HD3000.html" alt="ProJet HD 3000 3D Printer" onmouseover="hd()" onmouseout="main()"/>
       	        <area shape="rect" coords="22,218,173,275" href="SD3000.html" alt="ProJet SD 3000" onmouseover="sd()" onmouseout="main()" />
       	        <area shape="default" nohref="nohref"/>

   	          </map>
```
Also note that I removed the coords from this definition since they aren't needed.

You also have 2 other mistakes on the page: in the image map, you refer to the function "hdplus()", which does not exist.

Finally, on line 19 of your page you have an anonymous jquery function:


```
$(function(){
				$("div.templatemo_gallery img").fullsize();
			});
```
You should drop the '$' in front of (function):


```
(function(){
				$("div.templatemo_gallery img").fullsize();
			});
```


----------



## madradgirl (Mar 8, 2011)

You are brilliant! 

Thank you so much! Not sure if or how I would have figured that out without you! It works perfectly!

Now I need to figure out how to make the image automatically rotate through the different image maps as well. I'm supposing that's a piece of cake, right?! :| 

You may hear from me again.

Cheers!


----------



## ehymel (Aug 12, 2007)

Happy to help. Please mark this thread as solved. I'll look for your next question...


----------



## Ent (Apr 11, 2009)

madradgirl posted the next question here:
http://forums.techguy.org/web-design-development/985273-rotating-images-image-maps.html


----------



## sepala (May 20, 2010)

hello madradgirl,

please mark this thread as solved


----------

