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


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="" target="_blank">
    <img class="fixed-background" 

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


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() {

$(window).resize(function() {

#imageContainer {
border:1px solid red;
<script src=""></script>

<div id='imageContainer'>

  <img src="" 

  <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" />

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.
Scroll to Top