Изменить цвет фона/непрозрачность выделенной области в HTML

Question

Как изменить цвет фона или непрозрачность конкретной области на изображении?

вот мой 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>

Я попытался непрозрачности, как хорошо, но ничего не похоже на работу. Есть идеи ?

вид на jsfiddle

Answer 1

Вы не сможете сделать это с изображением карты, потому что area s не поддерживают CSS свойства, которые вы хотите .. Вы должны попытаться создать карту CSS, которая baically то же самое только с абсолютно позиционируется div s или закрепляется над позиционированным img. Есть много онлайн-инструментов, которые сделают это для вас - например, this one.

Пример для того, что ваш код должен выглядеть следующим образом:

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

с CSS:

a.area:hover{background:red;} 

карты CSS часто используются, когда необходимо выделить области с границами, фоном или даже CSS3 свойства как эффект свечения, а также используются, когда карты изображений не поддерживаются, например, вкладки FBML на facebook и т. д.

Answer 2

Путь SVG (помощник: clip-path-generator) на ima ge и клонированный клон без клип-пути, как внутри контейнера. Был добавлен слой с низкой непрозрачностью, чтобы подсветка стала еще более понятной. - jsfiddle -

ps.1: на этом генераторе кликов вы можете щелкнуть и перетащить изображение с рабочего стола на холст. Вы можете легко найти больше генераторов клипов в Интернете, например, this one.

ps.2: вместо этого вы можете создавать фигуры svg на графических программах (например, Inkscape или Adobe Illustrator).

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>

Более простой вариант этого, с одним изображением, без фильтров, без отсечения путь, используя цельную форму SVG построен на 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>