I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog's nose. What I want to achieve is that when a user hovers over a tag, the brightness around the corresponding part of the image should increase. Can anyone guide me on how to accomplish this?
function highlightTag(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');
tag.setAttribute('type', 'text');
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));
/**
* Need help here: How can I add a mouseover function to increase the brightness
* of the image when hovering over the tag?
*/
tag.onmouseover = function() {};
var br = document.createElement('br');
var button_div = document.getElementById('highlight_tag_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='highlight_tag' onclick="highlightTag()">Highlight Tag 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='tag_area'>
<input type="submit" name="submit" value="Tag" id='input'>
</div>
<div id='highlight_tag_area'></div>
</form>