Shadow around map / area - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. box-shadow

Description

Shadow around map / area

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper mol</title> 
  <style>
html {<!--from w  w w .  j  a va2s  . co  m-->
   font-size:31px;
   min-height:100%;
   background:linear-gradient(0deg, transparent,gray);
}

p , h1 {
   text-align:center;
   position:relative;
   text-shadow:2px 2px Chartreuse
}

.image_map {
   width:641px;
   height:481px;
   margin:2em auto;
   border:solid gray;
   box-shadow:0 0 0.6em  white,0 0 0  2001px yellow;
   transition:0.6s;
   border-radius:2em;
   overflow:hidden;
   position:relative;
}

img {
   vertical-align:top;
}

h1,p {
   margin:0;
}

map, area {
   position:absolute;
   display:block;
   text-align:center
}

map {
   top:0;
   left:0;
   font-size:3em;
}

area:before {
   content:attr(title);
   color:blue;
   text-shadow:0 0 2px pink;
}

area[title="Lien 1"] {
   top:0;
   left:0;
   width:299px;
   height:249px;
   background:OrangeRed;
   line-height:249px;
}

area[title="lien 2"] {
   top:0;
   left:299px;
   width:343px;
   height:249px;
   background:grey;
   line-height:249px;
}

area[title="lien 3"] {
   top:249px;
   left:0;
   width:339px;
   height:233px;
   background:BlueViolet;
   line-height:233px;
}

area[title="lien 4"] {
   top:249px;
   left:339px;
   width:303px;
   height:233px;
   background:Chartreuse;
   line-height:233px;
}

area:hover {
   background:none;
}

@media all and (max-width:700px)  {
   div.image_map {
      width:481px;
      height:361px;
      overflow:hidden;
      position:relative;
      border:solid red;
      box-shadow:0 0 0.6em  white,0 0 0  2001px yellow;
      transition:0.6s;
   }
   
   html {
      transition:0.6s;
      font-size:21px;
   }
   
   .image_map img, map {
      position:absolute;
      transform:scale(0.76);
      transform-origin:0 0
   }

}

@media all and (max-width:500px)  {
   div.image_map {
      border:solid blue;
      width:321px;
      height:241px;
      overflow:hidden;
      position:relative;
      border:solid;
      box-shadow:0 0 0.6em  white,0 0 0  2001px blue;
      transition:0.6s;
   }
   
   html {
      transition:0.6s;
      font-size:16px;
   }
   
   .image_map img, map {
      position:absolute;
      transform:scale(0.6);
      transform-origin:0 0
   }

}
</style> 
 </head> 
 <body> 
  <h1>Lorem ipsum dolor </h1> 
  <div class="image_map"> 
   <img id="Image-Maps_my" src="https://www.java2s.com/style/demo/Google-Chrome.png" usemap="#Image-Maps_my" border="0" width="640" height="480" alt="Ants surfing weeds"> 
   <map id="_Image-Maps_my" name="Image-Maps_my"> <area shape="rect" coords="0,0,298,248" href="#" alt="Lien 1" title="Lien 1"> <area shape="rect" coords="297,1,635,249" href="#" alt="lien 2" title="lien 2"> <area shape="rect" coords="0,247,338,475" href="#" alt="lien 3" title="lien 3"> <area shape="rect" coords="336,245,635,475" href="#" alt="lien 4" title="lien 4"> </map> 
  </div> 
  <p> <a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="Lien 1">Lorem </a>Lor<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 2">Lorem </a>Lor<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 3">Lorem </a>Lor<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 4">Lorem </a>Lor<a style="text-decoration:none; color:black;  font-family:verdana;" href="" title="Image Map">Lorem ips</a> </p>  
 </body>
</html>

Related Tutorials