Adjust the background color and transparency of a specific section using HTML

Question

Adjust the background color and transparency of a specific section using HTML

Is there a way to modify the background color or opacity of a specific area within an image?

Take a look at my HTML, JavaScript, and CSS:

function changeColor()
{
    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="changeColor()" 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 experimented with using opacity but nothing seemed to have any effect. Any suggestions on how to achieve this?

Check it out on jsfiddle

javascript css html area

Answer 1

Answer №1

Image maps do not allow for the CSS properties you desire. Consider using a CSS map instead, where absolutely positioned divs or anchors are placed over a positioned img. There are various online tools available to assist with this process, such as this one.

An example of how your code should be structured:

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

Add the following CSS:

a.area:hover{background:red;}

CSS maps are effective for highlighting areas with borders or background effects, and can even incorporate CSS3 features like glow effects. They are particularly useful in situations where traditional image maps are not supported, such as Facebook FBML tabs.

Answer 2

Image maps do not allow for the CSS properties you desire. Consider using a CSS map instead, where absolutely positioned divs or anchors are placed over a positioned img. There are various online tools available to assist with this process, such as this one.

An example of how your code should be structured:

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

Add the following CSS:

a.area:hover{background:red;}

CSS maps are effective for highlighting areas with borders or background effects, and can even incorporate CSS3 features like glow effects. They are particularly useful in situations where traditional image maps are not supported, such as Facebook FBML tabs.

Answer 3

Answer №2

Incorporating a SVG clip-path generated from clip-path-generator onto an image along with a blurred duplicate devoid of the clip-path, both contained within a larger container. To further emphasize the effect, a translucent color layer has been added. Check out the demonstration on - jsfiddle -

Note: You can easily transfer images into the canvas by dragging and dropping in this clip-path generator. Additionally, there are other similar clip-path generators available online like this one.

Moreover, you can also create SVG shapes using graphic design software such as Inkscape or 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+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy...
}

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

An alternative rendition featuring a solitary image, no filters or clip-paths, instead employing a solid SVG shape crafted using 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>

Answer 4

Incorporating a SVG clip-path generated from clip-path-generator onto an image along with a blurred duplicate devoid of the clip-path, both contained within a larger container. To further emphasize the effect, a translucent color layer has been added. Check out the demonstration on - jsfiddle -

Note: You can easily transfer images into the canvas by dragging and dropping in this clip-path generator. Additionally, there are other similar clip-path generators available online like this one.

Moreover, you can also create SVG shapes using graphic design software such as Inkscape or 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+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy...
}

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

An alternative rendition featuring a solitary image, no filters or clip-paths, instead employing a solid SVG shape crafted using 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>

Adjust the background color and transparency of a specific section using HTML

Answer №1

Answer №2

Similar questions

Ensure that pressing the ENTER key on a form will only activate a specific submit button, even when there are multiple buttons present

If you refer to a function, are you personally calling the function or asking the reference to call it?

Update DataTable 1.9 while preserving existing rows

JSF CommandLink malfunctions on Firefox when reRendering an entire form

Ways to Retrieve the Value of an Object

Instructions for resetting a DataTable in JQuery that was originally built using an append operation

Guide to transmitting and managing a JSON document utilizing JavaScript

Gulp does not work well with Android APK compilation

the php renderer fails to take into account the styles

Injecting Ajax-loaded content into an HTML modal

Modifying the content of the front-end HTML file according to the data retrieved from express-session

update the markers on a leafletjs map

Error encountered in Storybook: The value is not iterable (property Symbol(Symbol.iterator) cannot be read)

Querying GraphQL: Retrieving partial string matches

Enlarge an image when hovering over it

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Is the input disabled when clicked on?

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Connecting MySQL to HTML: Step-by-step guide

Tips for preventing text wrapping in off-canvas design