Trying to highlight a section of a .png using HTML/CSS/jQuery/JavaScript

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 (e.g. 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.

what do you mean by "highlight?" You could create a semi-transparent box overlaid on the image to create a highlight, or do you mean putting a border around an area? Please explain what would be highlighted or why you would highlight, so I can give you some ideas. — Ryan
– Ryan, Commented Apr 28, 2013 at 3:04
Thanks very much for your prompt response. By "highlight", I mean I want to put a coloured (yet transparent) border around a section of the image that enhances the visibility of the area surrounded by that region. In other words, the former in your answer, and not the latter :-) — syedfa
– syedfa, Commented Apr 28, 2013 at 3:06

Mottie · Accepted Answer · 2013-04-28 03:17:37Z

2

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.

edited Apr 28, 2013 at 3:17

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

answered Apr 28, 2013 at 3:13

j08691

208k33 gold badges269 silver badges281 bronze badges

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

6 Comments

syedfa Over a year ago

Thanks very much for your solution. Do I need to use jQuery for this to work, and can this functionality be turned on/off using javascript if I want to leave alone the colour and the region?

j08691 Over a year ago

Well no, technically you never need jQuery since you can do anything jQuery does in plain JavaScript; jQuery just makes it much, much easier. But do make it dynamic, like turning it on and off, or moving it, then yes you'll need JavaScript (of some sort).

syedfa Over a year ago

I do need some clarification here. How is the region defined here? I see that width and height are defined, but what about top, and left? Is "top" the distance in pixels from the upper limit of the image (i.e. the "y" coordinate, and "left" the "x" coordinate)?

j08691 Over a year ago

The top and left are the distance in pixels relative to the container. By making the container div's position relative, and the highlight div's position absolute, the values of the highlight are relative to the container.

hobberwickey Over a year ago

if you just want a semi-transparent, but not filled in square (it sounded like you did in your question) just change "background: rgba(255, 0, 0, 0.4)" to "border: solid 1px rgba(255, 0, 0, 0.4)" You can adjust the thickness of the box by changing the "1px" to whatever.

|

Collectives™ on Stack Overflow

Trying to highlight a section of a .png using HTML/CSS/jQuery/JavaScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related