How can I change the brightness of only part of an image (html/css/js)?

Question

I have an image with tags underneath that correspond to different parts of the image. For instance, the image might be a dog, and one of the tags is 'nose', which corresponds to the portion of the image around the dogs nose. When the user hovers over a tag, I want the brightness around this corresponding part of the image to increase. How can I do this?

function fixLabel(c) {
  var x_coor = document.getElementById('x').textContent;
  var y_coor = document.getElementById('y').textContent;

  var x2_coor = document.getElementById('x2').textContent;
  var y2_coor = document.getElementById('y2').textContent;

  var width = document.getElementById('w').textContent;
  var height = document.getElementById('h').textContent;

  var tag = document.createElement('input'); // Create a `input` element,
  tag.setAttribute('type', 'text'); // Set it's `type` attribute,
  tag.setAttribute('name', 'loc:' + round_2_decimals(x_coor) + "-" + round_2_decimals(y_coor) + "-" +
    round_2_decimals(x2_coor) + "-" + round_2_decimals(y2_coor) + "-" + round_2_decimals(width) +
    "-" + round_2_decimals(height));

  /**
   *Here's the area: How do I attach a mouseover function so the image's 
   *brightness increases whenever I hover over the tag?
   */
  tag.onmouseover = function() {};

  var br = document.createElement('br'); // Create a `br` element,
  var button_div = document.getElementById('fix_label_area');
  button_div.appendChild(br);
  button_div.appendChild(tag);
  button_div.appendChild(br);
};

<div>
  <p id='x'></p>
  <p id='y'></p>
  <p id='x2'></p>
  <p id='y2'></p>
  <p id='w'></p>
  <p id='h'></p>
  <br/>
  <button id='fix_label' onclick="fixLabel()">Fix Label Here</button>
</div>

<form action="" method="POST" id="canvas">
  <div id='img_area'>
    <img src="someImageFile.jpg" id="imageId" width="350" height="350" />
  </div>
  <div id='label_area'>
    <input type="submit" name="submit" value="Label" id='input'>
  </div>
  <div id='fix_label_area'></div>
</form>

Probably best bet would be to either use an svg or canvas, if you want to use standard images and css, then you could use an image map on the main image and as you hover certain parts, absolute position the highlighted version over the correct area — Pete
– Pete, Commented Jul 3, 2018 at 14:31

epascarello · Accepted Answer · 2018-07-03 14:43:23Z

4

Personally Canvas and SVG are more powerful, but you can use CSS to clip a circle and opacity to dim the original. But you need to check the browser support to make sure it covers the browsers you need.

div.holder {
  position: relative;
}

img.main {
  opacity: .4;
}

img.circle {
    position: absolute;
    clip-path: circle(50px at 405px 135px);
}

<div class="holder">
  <img class="circle" src="https://placedog.net/500" />
  <img class="main" src="https://placedog.net/500" />
</div>

answered Jul 3, 2018 at 14:43

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m4n0 Over a year ago

Placekitten please.

Collectives™ on Stack Overflow

How can I change the brightness of only part of an image (html/css/js)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related