尝试使用 HTML/CSS/jQuery/JavaScript 突出显示 .png 的一部分

Question

I am trying to highlight a section of a .png file using either HTML/CSS/JavaScript/jQuery. I am able to display the image, but am not sure how to highlight a particular section (I don't wish to highlight the entire image).

At the moment, the html code that I have to display the image is quite simply:

<img src="myImage.png" />

Nothing too extravagant.

It is imperative that the portion that is to be highlighted remains visible to the user. Ideally, I want the highlighting to be a set of controls that can be turned on/off by calling a particular method/function. Is this possible, and if so, how? Do I need to specify the exact coordinates of the region I wish to highlight (eg x, y, length, width)? I am ok with this, it's just that I'm a web design novice, and honestly don't know how to do this.

Answer 1

You could do this vis something along these lines: jsFiddle example

HTML

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

CSS

#container {
    position:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

This example positions a div above an image within a container, and sets the background to be partially transparent using rgba. You can set the position, colors, opacity, etc. via JavaScript.