0

Is an <area> element grayscalable through CSS?

$(".shape").on("mouseenter", function(evt) {
  $(this).addClass("bw")
})
.bw {
  filter: grayscale(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://wallpaperbrowse.com/media/images/5611472-simple-images.png" class="image" height="500px" width="500px" usemap="#simple">

<map class="map" name="simple">
  <area class="poly shape" coords="87,64,85,170,205,174,205,64,143,64,109,64" shape="poly">
  <area class="circle shape" coords="419,258,123" shape="circle">
</map>

View on JSFiddle

showdev
  • 28,454
  • 37
  • 55
  • 73
Paris Mavromoustakos
  • 21
  • 1
  • 7
  • No, what you are trying to do cannot be done. – Ahmad Alfy Mar 16 '18 at 19:25
  • Relevant: [Apply css to AREA MAP](https://stackoverflow.com/questions/5026421/apply-css-to-area-map) and [Visible Area tag?](https://stackoverflow.com/questions/1906734/visible-area-tag) – showdev Mar 16 '18 at 19:26
  • Short answer No, Long answer, with SVG yes - Is this the effect you are trying to achieve [JSFiddle](https://jsfiddle.net/Psylene/cva0qctg/78/) ? – Gregory Nikitas Mar 16 '18 at 20:28

0 Answers0