Question

我有一幅图像，其下面带有与图像的不同部分相对应的标签。例如，图像可能是一条狗，而标签之一是“鼻子”，它对应于图像在狗鼻子周围的部分。当用户将鼠标悬停在标签上时，我希望图像相应部分周围的亮度增加。我该怎么办？

var clicked=false, clickTimeout=300; 
function mouseClicked(){
  if(!clicked){
    clicked=true;
    setTimeout(function(){
      if(clicked){
        console.log("single click");
        clicked=false;
        //single ClickStuff

      }
    },clickTimeout);
  }else{
    clicked=false;
    console.log("double click");
    //double click Stuff
  }
}

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);
};

Answer 1

个人Canvas和SVG功能更强大，但是您可以使用CSS剪切圆圈和不透明度以使原始图像变暗。但是您需要检查browser support，以确保它涵盖了您需要的浏览器。

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>

如何更改图像仅一部分的亮度（html / css / js）？

1 个答案: