0

Hello i have a html image map however it will not work on firefox i just get the alt tag :( below is the code with all the area sections removed to keep things short.

<img id="processMap" name="processMap" src="path to image" usemap="#processMap" alt=""/>
            <map id="_processMap" name="processMap">
                #all the areas
            </map>

This works on all the other browsers i have tried (ie, chrome, safari and opera) but with firefox i just get what ever is in the alt tag :/ does anyone know whats up?

Thanks for the help!.

Updated code (still doesn't work)

<img id="processMap" name="processMap" src="path to image" usemap="#processMap" alt=""/>
            <map id="processMap" name="processMap">
                #all the areas
            </map>

2 Answers 2

0

your ID's don't match:

<img id="processMap" name="processMap" src="path to image" usemap="#processMap" alt=""/>
            <map id="_processMap" name="processMap">
                #all the areas
            </map>

your usemap should be equal to map id, so change it to:

<img id="processMap" name="processMap" src="path to image" usemap="#processMap" alt=""/>
            <map id="processMap" name="processMap">
                #all the areas
            </map>

Update

Working Fiddle

I just tested on Firefox 28

2
  • I thought i would save everyone the hassle of looking over my code so removed image path etc, turns out i was using \ in the path not / Thank you for the help :) Apr 5, 2014 at 23:25
  • 1
    your welcome! Next time post your full code, for better assistance :D and since you are using image map take a look at this: w3schools.com/tags/tag_map.asp, because there are different approaches if you are using html5 or not.
    – dippas
    Apr 5, 2014 at 23:27
0

Id's must be specific to one element & one element only, unlike classes which can be re-used multiple times when you use htlm usemap attribute
usemap="#processMap"
the browser is using Javascript under the hood to try and find that element via the getElementById Api, or in the case of firefox it maybe using rust, but it is searching for an Id equal to the value that you specify, the same as when you use a label for an input, this is also using document.getElementById or some other Rust/C/C# variant. you've declared processMap in several different locations. Also you have not specified a type for the image such as

type="image/jpg", type="image/png", type="image/gif".. 

Plus your code does not specify a shape or the coords attributes which are necessary for the map & Area to work.. ** also Image tags are self closing so you can omit the trailing / at the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.