Jump to content
Stef's Coding Community

Hotspot Link Compatibility Issue with Firefox


Recommended Posts

The usemap should match precisely as the 'name' of the map tag.

 

<map name="FPMap0">

 

is not the same as...

 

usemap="#FPMap0"

 

 

Either remove the # from usemap or add the # to the map name.

 

 

I tried this and it doesn't seem to change anything in Firefox. When I took the # out of the usemap name, it stopped working in IE. Any other ideas?

Link to post
Share on other sites

It's not the "#FPMap0" or "FPMap0" which are correct: name="FPMap0" and usemap="#FPMap0". Firefox doesn't like the "a" tag inside the map element. You have:-

<map name="FPMap0">

<a href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm#LiveContent[ForbesMap]" 
target="_blank" alt="Forbes-AV, Tony Janesin">

<area class="pointer" 
href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm" shape="POLY" alt="Forbes-AV, Tony 
Janesin" target="_blank" 
coords="211,148,196,120,202,112,196,94,186,100,182,75,1
90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19
9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4
71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12
2,577,136,586,136,577,110,573,104,584,95,589,76,581,59,
573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3,
572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3
1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3
4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675,
99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727
,104,710,110,723,120,701,124,707,138,688,152,681,155,67
9,162,671,166,669,180,668,191,659,196,644,203,624,214,6
22,219,609,224,602,232,599,239,585,242,573,251,568,250,
576,239,582,230,579,223,582,218,579,212,561,204,548,197
,544,186,532,182,524,173,513,174,503,185,485,186,477,18
1,468,182,458,176,400,174,379,174,320,166,278,158,228,1
46,226,155" />
</a>
 <!--and the others-->

</map></p> 
<div align="center">
<img border="0" alt="" src="images/A-V-repmap-03.01.12
-for-website.jpg" width="740" height="468" 
usemap="#FPMap0" /></div>

but I can get Firefox to operate links if the "a" tags are removed:-

<map name="FPMap0">
<!--<a href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm#LiveContent[ForbesMap]" 
target="_blank" alt="Forbes-AV, Tony Janesin">-->

<area class="pointer" 
href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm" shape="POLY" alt="Forbes-AV, Tony 
Janesin" target="_blank" 
coords="211,148,196,120,202,112,196,94,186,100,182,75,1
90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19
9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4
71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12
2,577,136,586,136,577,110,573,104,584,95,589,76,581,59,
573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3,
572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3
1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3
4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675,
99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727
,104,710,110,723,120,701,124,707,138,688,152,681,155,67
9,162,671,166,669,180,668,191,659,196,644,203,624,214,6
22,219,609,224,602,232,599,239,585,242,573,251,568,250,
576,239,582,230,579,223,582,218,579,212,561,204,548,197
,544,186,532,182,524,173,513,174,503,185,485,186,477,18
1,468,182,458,176,400,174,379,174,320,166,278,158,228,1
46,226,155" />
<!--</a>-->
 <!--and the others-->

</map></p> 
<div align="center">
<img border="0" alt="" src="images/A-V-repmap-03.01.12
-for-website.jpg" width="740" height="468" 
usemap="#FPMap0" /></div>

but I don't know what that will do to the way you want the map to work. It isn't usual to have an "a" tag there. It should be in the format:-

<map name="my-map">
<area shape="rect" href="introduction.php" coords="10,1,75,30" alt="Introduction">
<area shape="rect" href="generaladvice.php" coords="95,20,170,50" alt="General Advice">
</map>
<img usemap="#my-map" src="images/map-image.jpg" alt="Map"> 

Link to post
Share on other sites

It's not the "#FPMap0" or "FPMap0" which are correct: name="FPMap0" and usemap="#FPMap0". Firefox doesn't like the "a" tag inside the map element. You have:-

<map name="FPMap0">

<a href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm#LiveContent[ForbesMap]" 
target="_blank" alt="Forbes-AV, Tony Janesin">

<area class="pointer" 
href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm" shape="POLY" alt="Forbes-AV, Tony 
Janesin" target="_blank" 
coords="211,148,196,120,202,112,196,94,186,100,182,75,1
90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19
9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4
71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12
2,577,136,586,136,577,110,573,104,584,95,589,76,581,59,
573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3,
572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3
1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3
4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675,
99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727
,104,710,110,723,120,701,124,707,138,688,152,681,155,67
9,162,671,166,669,180,668,191,659,196,644,203,624,214,6
22,219,609,224,602,232,599,239,585,242,573,251,568,250,
576,239,582,230,579,223,582,218,579,212,561,204,548,197
,544,186,532,182,524,173,513,174,503,185,485,186,477,18
1,468,182,458,176,400,174,379,174,320,166,278,158,228,1
46,226,155" />
</a>
 <!--and the others-->

</map></p> 
<div align="center">
<img border="0" alt="" src="images/A-V-repmap-03.01.12
-for-website.jpg" width="740" height="468" 
usemap="#FPMap0" /></div>

but I can get Firefox to operate links if the "a" tags are removed:-

<map name="FPMap0">
<!--<a href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm#LiveContent[ForbesMap]" 
target="_blank" alt="Forbes-AV, Tony Janesin">-->

<area class="pointer" 
href="/Portals/0/ForbesMap/audio-Forbes-AV-
International.htm" shape="POLY" alt="Forbes-AV, Tony 
Janesin" target="_blank" 
coords="211,148,196,120,202,112,196,94,186,100,182,75,1
90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19
9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4
71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12
2,577,136,586,136,577,110,573,104,584,95,589,76,581,59,
573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3,
572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3
1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3
4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675,
99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727
,104,710,110,723,120,701,124,707,138,688,152,681,155,67
9,162,671,166,669,180,668,191,659,196,644,203,624,214,6
22,219,609,224,602,232,599,239,585,242,573,251,568,250,
576,239,582,230,579,223,582,218,579,212,561,204,548,197
,544,186,532,182,524,173,513,174,503,185,485,186,477,18
1,468,182,458,176,400,174,379,174,320,166,278,158,228,1
46,226,155" />
<!--</a>-->
 <!--and the others-->

</map></p> 
<div align="center">
<img border="0" alt="" src="images/A-V-repmap-03.01.12
-for-website.jpg" width="740" height="468" 
usemap="#FPMap0" /></div>

but I don't know what that will do to the way you want the map to work. It isn't usual to have an "a" tag there. It should be in the format:-

<map name="my-map">
<area shape="rect" href="introduction.php" coords="10,1,75,30" alt="Introduction">
<area shape="rect" href="generaladvice.php" coords="95,20,170,50" alt="General Advice">
</map>
<img usemap="#my-map" src="images/map-image.jpg" alt="Map"> 

 

 

That worked! Thanks for all your help, you're awesome!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...