Change background color / opacity of a selected area in HTML

Question

How can I change the background color or opacity of a particular area in image ?

here's my HTML, javascript & CSS

 function myFunction() { document.getElementById('testid').setAttribute("class", "style1"); } 

 .style1{ background: red } 

 <img src="http://mridulahuja.com/uploads/1/3/8/6/13860206/_____2659642_orig.jpg" alt="" usemap="#Map" /> <map name="Map" id="Map" href="www.mridulahuja.com"> <area alt="" title="" href="#" shape="poly" id="testid" onlcick="myFunction()" coords="117,36,162,20,193,34,189,55,108,55" /> <area alt="" title="" href="#" shape="poly" coords="33,93,33,119,32,143,32,169,32,186,31,191,94,194,123,194,149,193,164,193,158,119,186,119,216,118,227,115,224,82,103,83,31,82" /> </map> 

I tried opacity as well but nothing seems to work. Any ideas ?

view on jsfiddle

Answer 1

You will not be able to do this with image maps because the area s do not support the CSS properties you want.. You should try creating a CSS map which is baically the same only with absolutely positioned div s or anchors over a positioned img . There are a lot of online tools that will do that for you - for example this one .

An example for what your code should look like:

<div style="position:relative; width..., height... background:url(..your image...)">

    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>

</div>

with css:

a.area:hover{background:red;}

CSS maps are often used when you need to highlight areas with borders, background or even css3 properties like glow effect, and are also used where image maps are not supported such as facebook FBML tabs etc.

Answer 2

A svg clip-path ( helper: clip-path-generator ) on a image and a blury clone without the clip-path, both inside a container. A low opacity color layer was added to let the highlight even more clear. - jsfiddle -

ps.1: on this clip-path generator, you can click and drag a picture from your Desktop into the canvas. You can easily find more clip-path generators around the web like this one .

ps.2: you can build svg shapes on graphic softwares (like Inkscape or Adobe Illustrator) instead.

 body { margin: 0; background: honeydew; } .container { position: relative; vertical-align: bottom; display: inline-block; border: 4px solid indigo; box-sizing: border-box; overflow: hidden; } .color { position: absolute; top: 0; left: 0; width:100%; height:100%; background-color: indigo; opacity: 0.2; } .back { -webkit-filter: blur(2px); /* Chrome, Safari, Opera */ filter: blur(2px); } .clipped { position: absolute; top:0; left:0; } #clip1 { /*Chrome,Safari*/ -webkit-clip-path: polygon(25px 250px,70px 250px,70px 285px,260px 285px,260px 250px,160px 250px,160px 115px,225px 115px,225px 90px,160px 90px,160px 70px,25px 70px); /*Firefox*/ clip-path: url("#clipPolygon"); /* iOS support inline encoded svg file*/ -webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat; } 

 <div class=container> <img class=back src="http://i.imgur.com/rjFPR2d.jpg" alt=img> <div class=color></div> <img id=clip1 class=clipped src="http://i.imgur.com/rjFPR2d.jpg" alt=img> </div> <svg width="0" height="0"> <clipPath id="clipPolygon"> <polygon points="25 250,70 250,70 285,260 285,260 250,160 250,160 115,225 115,225 90,160 90,160 70,25 70"> </polygon> </clipPath> </svg> 

A simpler version of it, with a single image, without filters, without clip-path, using a solid svg shape built on Adobe Illustrator:

 .container { position: relative; } svg { position: absolute; top: 0; left: 0; } polygon { cursor: pointer; opacity: 0.6; fill: green; } polygon:hover { opacity: 0.8; fill: red; } 

 <div class=container> <img class=back src="http://i.imgur.com/rjFPR2d.jpg" alt=img> <svg x="0px" y="0px" width="317px" height="327px" viewBox="0 0 317 327"> <polygon fill="#FF0000" points="24,252 24,70 164,70 164,91 223,91 223,119 164,119 164,252 "/> </svg> </div>