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://answall.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 size of the browser (width and height), that is, the image has to match the top, the bottom, the right and the left whatever the size of browser.

I tried with the map and area but I couldn’t because the image has no fixed size. How can I do this?

Example in jsfiddle

Answer 1

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

However, you can recalculate the image size via CSS property Zoom, and the map will meet 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.

Answer 2

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

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

That would be your example:

$(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>
<script src="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 adjustment in this example in Jsfiddle and see if he answers you.