Jump to content


Photo

Hotspot Link Compatibility Issue with Firefox


  • Please log in to reply
4 replies to this topic

#1 Luke

Luke

    New member

  • New Members
  • 3 posts

Posted 13 April 2012 - 05:26 PM

My company's website (http://www.forbes-av...4/Default.aspx has a Rep Map on this page. Each of the states is supposed to be a clickable hotspot to link to other information. This works just fine in IE but for some reason Firefox doesn't recognize that there are any clickable links there. Anyone have any ideas as to why this might be?
  • 0

#2 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,587 posts
  • LocationTexas

Posted 14 April 2012 - 10:34 AM

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.
  • 1

#3 Luke

Luke

    New member

  • New Members
  • 3 posts

Posted 16 April 2012 - 12:49 PM

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?
  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 16 April 2012 - 01:54 PM

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"> 

  • 0

#5 Luke

Luke

    New member

  • New Members
  • 3 posts

Posted 18 April 2012 - 10:10 AM

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!
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users