How to put a clickable area on a piece of an image?

Question

How to put a clickable area on a piece of an image?

Navigation

#1 by (15 votes)
#2 by (10 votes)

20

I have this code on my site:

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}


<a href="https://pt.stackoverflow.com" target="_blank">
    <img class="fixed-background" 
    src="http://s3.amazonaws.com/rapgenius/cats-animals-kittens-background.jpg"/></a>

Iwantedonlytheeyeofthecattobeclickable,butalsothattheimagefitthesizeofthebrowser(widthandheight),ietheimagehastohittop,bottomandlefttagsregardlessofbrowsersize.

ItriedwithmapandareabutIcouldnotbecausetheimagehasnofixedsize.HowcanIdothis?

Example in jsfiddle

html

asked by anonymous 24.09.2015 / 15:55

2 answers

15

The original image does not need to have defined sizes - but map areas require absolute values.

However, you can recalculate the image size via% cc% CSS property, and the map will respect the definition. Example:

var larguraImg = document.getElementById('imagem').offsetWidth;

var recalcZoom = function ()
{
  var larguraPai = $("#imageContainer").width();
  
  var zoom = larguraPai / larguraImg;
  
  console.log('larguraImg: ' + larguraImg);
  console.log('larguraPai: ' + larguraPai);
  console.log('zoom: ' + zoom);
  
  $("#imagem").css('zoom', zoom);
  
};

$("#imageContainer").resize(function() {
  recalcZoom();
});

$(window).resize(function() {
  recalcZoom();
});

recalcZoom();

#imageContainer {
  overflow:hidden;
  width:100%;
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid='imageContainer'><imgsrc="http://s3.amazonaws.com/rapgenius/cats-animals-kittens-background.jpg" 
       usemap="#Map" 
       id='imagem'
       />

  <map name="Map" id="Map">
    <area href="#" onClick="alert('Olho esquerdo');" 
          shape="poly" coords="339,207,311,221,319,247,352,258,374,247,380,214,362,207" />
    <area href="#" onClick="alert('Olho direito');" 
          shape="poly" coords="369,305,327,320,325,350,338,382,357,383,384,369,395,343,389,314" />
  </map>
</div>

For your initial requirement:

[...] that the image fit the size of the browser [...]

You can proceed as follows:

Detect events from resize (in my example I used jQuery);
Recalculate the zoom factor.

24.09.2015 / 16:00

What is deep learning? Differences between OnKeyUp, OnKeyDown and OnKeyPress?

score 10 · Accepted Answer

Reusing % of% that OnoSendai posted, you can add the library jQuery RWD Image Maps to automatically resize the coordinates of your image.

jQuery RWD image maps Allows image maps to be used in an agile project by recalculating the coordinates area to match the actual image size.

It would look like this:

$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<div>
    <img src="http://s3.amazonaws.com/rapgenius/cats-animals-kittens-background.jpg"usemap="#Map" 
       id='imagem'
       class="fixed-background" 
       />

  <map name="Map" id="Map">
    <area href="#" onClick="alert('Olho esquerdo');" 
          shape="poly" coords="339,207,311,221,319,247,352,258,374,247,380,214,362,207" />
    <area href="#" onClick="alert('Olho direito');" 
          shape="poly" coords="369,305,327,320,325,350,338,382,357,383,384,369,395,343,389,314" />
  </map>
</div>

Test the size setting in this example in JSFiddle and see if it suits you.