CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
Jesus Chico
Jesus Chico

Reputation: 1

Why don't anchors work on map coordinates in Firefox only?

I have this code for a map Im making. But for some reason the <a> Before <area> doesnt work on firefox only. On chrome or IE you can hover and see something is clickable but not with firefox. Any help?

<p>
    <img alt="California map showing counties" border="0" height="1015" src="http://imjesuschiko.com/doc/map.png" usemap="#ca_map_counties_Map" width="834"> 
    <map id="ca_map_counties_Map" name="ca_map_counties_Map">
        <a href="http://google.com"><area alt="Sacramento" coords="223,369, 227,364, 231,364, 235,367, 259,370, 263,376, 264,393, 264,404, 251,412, 239,412, 225,420, 220,428, 208,432, 214,426, 219,421, 223,416, 222,408, 227,403, 231,380" shape= "poly"></a>
    </map>
</p>

http://liveweave.com/69610i

Upvotes: 0

Views: 36

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

I just finished to check what happen on last version of ie, ff and chrome.

The solution I found is:

$(function () {
  $('#ca_map_counties_Map').parent('a:first').on('click', function(e) {
    e.preventDefault();
    window.location.href = $(this).attr('href');
  });
});
area {
  display: inline;
  cursor: pointer;
}
a:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
  z-index: 1000;
}
img {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  height: 1015px;
  width: 834px;
}
<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<p>
  <a href="http://google.com"><map id="ca_map_counties_Map" name="ca_map_counties_Map">
    <area alt="Sacramento" coords="223,369, 227,364, 231,364, 235,367, 259,370, 263,376, 264,393, 264,404, 251,412, 239,412, 225,420, 220,428, 208,432, 214,426, 219,421, 223,416, 222,408, 227,403, 231,380" shape="poly">
    </map></a>
  <img alt="California map showing counties" border="0" height="1015" src="http://imjesuschiko.com/doc/map.png" usemap="#ca_map_counties_Map" width="834">
</p>

Upvotes: 1

Related Questions