我有一张图像,其下面的标签对应于图像的不同部分。例如,图像可能是一只狗,标签之一是“ Nose ”,它对应于图像中狗 Nose 周围的部分。当用户将鼠标悬停在标签上时,我希望图像相应部分周围的亮度增加。我怎样才能做到这一点?
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>
最佳答案
个人认为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>
关于javascript - 如何仅更改图像(html/css/js)的一部分的亮度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51157030/