Hover effect over a poly image map using jquery and html/css

Question

I'm been trying to look through past questions but couldn't find an answer that worked for me.

I'm making an image map of these cities here. I used a map coord creator to start me off.

<h1>The cities of Hamilton Region</h1>
<img src="img/hamilton.png" alt="" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

Now when I click a field a blue line goes around the border and encloses the city I clicked on. I would like to use either jquery or css to do the following:

instead of outline in blue, the field is highlighted (I want it to be red when clicked)
When the mouse hovers over, the field turns light blue
When a field that's been clicked on (appears red) is clicked again, the red goes away.
When highlighted red, words appear under the image giving a short description about it.
When clicked on again, words go away.

I know it has something to do with the "area" tag. Maybe doing the

<Area onlick="highlight_city()">

I'm not sure...

Alain Nisam · Accepted Answer · 2016-02-20 06:36:15Z

Here are some of the solutions. Still working on the rest (*the map is not aligned correctly, but that's an easy fix).

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<style type="text/css">
area{
    outline-color: red;
}
</style>

<h1>The cities of Hamilton Region</h1>
<img src="https://i.sstatic.net/y8cf8.png" alt="" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

<script>
$(document).on('click',$('area'),function(e){
    $('#city').html( $(e.target).data('city') );
    $('#pop').html( $(e.target).data('pop') );
})
</script>

Update:

Ok, here's some more: There's no way to easily do what you are talking about. You have to use a canvas and actually draw the polygons on the canvas

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<style type="text/css">
area:hover {
    outline-color: red;
    border: 1px solid blue;
}
img {
    width: 490px;
}
</style>
</head>
<body>
<h1>The cities of Hamilton Region</h1>
<img src="file:///Users/alainnisam/Desktop/Screen Shot 2016-02-20 at 12.24.40 AM.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

<canvas id="myCanvas" style="border:1px dashed #FF0000;"></canvas>

<script>
$(document).on('click',$('area'),function(e){
    $('#city').html( $(e.target).data('city') );
    $('#pop').html( $(e.target).data('pop') );
})

$("area").click(function () {
  var $input = $(this);
  var obj = $input.attr("coords").split(',');
  var poly = obj;
  //alert(poly);
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(255, 0, 0, .5)';

  ctx.beginPath();
  ctx.moveTo(poly[0], poly[1]);
  for (item = 2; item < poly.length - 1; item += 2) {
    ctx.lineTo(poly[item], poly[item + 1])
  }

  ctx.closePath();
  ctx.fill();
});

//$('#myCanvas').css('width',$('img').css('width')).css('height',$('img').css('height')).css('background-image','url(' + $('img').attr('src') + ')');
$('#myCanvas').css('width','490px').css('height','495px');
</script>
</body>
</html>

Thanks a lot! You've gotten this way farther than I ever could on my own. I don't entirely understand what you added and why it needs to be what it is, but I'll accept this as an answer.
The problem is that with an "area" tag, there is no way to apply a transparent color in the shape of the area. So, the only way to do it is by drawing a shape using the "canvas" tag (with a transparent color). The good news is that the canvas tag can use the same coordinates as your area tag. Then, you have to position the canvas OVER the map using position: absolute and z-index. It's a fairly complex and cludgey job. Good luck!
@AlainNisam: It is working like a charm! Can we do the same on mouse over too?

Collectives™ on Stack Overflow

Hover effect over a poly image map using jquery and html/css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related