0

Hi im sorry for this simple problem. i try to make image map for this image with this codes , but is not work . i think i dont know how can i set image map for (width: 100vw; height: 100vh;) and i want run it on smartphone screen site because it is full screen height. this is my code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
  <title>Sajjad</title>

  <style>
 body {
  margin: 0;
  padding: 0;
  background-color: #FFFF52
  }
div.img {
  background-image: url('http://s8.picofile.com/file/8313427126/Portrait_icon_text_install_and_close_8.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  }
  
  </style>
  
</head>
<body>

<div>
<img class="img" usemap="#image-map">
</div>

<map name="image-map">
    <area target="" alt="StartAd-Install" title="StartAd-Install" href="http://site.ir/" coords="669,1227,386,1137" shape="rect">
    <area target="" alt="StartAd-Close" title="StartAd-Close" href="http://site.ir/" coords="54,1138,335,1227" shape="rect">
    <area target="" alt="StartAd-Info" title="StartAd-Info" href="http://site.ir/" coords="41,1279,2,1245" shape="rect">
</map>

</body>
</html>

Thank You.

Mustapha Belmokhtar
  • 1,231
  • 8
  • 21
Sajjad Akbari
  • 31
  • 5
  • You'll need to use a plugin for responsive image maps: https://stackoverflow.com/questions/7844399/responsive-image-map – Robert Wade Dec 05 '17 at 14:53
  • Possible duplicate of [Responsive image map](https://stackoverflow.com/questions/7844399/responsive-image-map) – agrm Dec 05 '17 at 19:14

0 Answers0