html – How to place a clickable area on a piece of an image?

Question:

I have this code on my website:

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

I wanted only the cat's eye to be clickable, but also the image to fit the browser's size (width and height), ie the image has to match the top , bottom , right and left whatever is the size of the browser .

I tried with the map and area but I couldn't because the image doesn't have a fixed size. How can I do this?

example in jsfiddle

Answer:

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

However, you can recalculate the image size via the CSS Zoom 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>

<div id='imageContainer'>

  <img src="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 fits the size of the browser […]

You can proceed as follows:

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