0

I have an image inside my page. After some javascript trigger event I want a cross appear on the image. Image will still be visible but cross will be on top.

What is the proper alternatives for this? (I have similar question here that used HTML5 canvas)

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272
  • do you want to edit the image or do you want to place another image on top of it? – akonsu May 22 '13 at 15:40
  • I don't want to edit image. No another image, only a X sign on top of image. – trante May 22 '13 at 15:44
  • you can place another `` element on top of your image. Give it `position: absolute` style and set the coordinates appropriately. – akonsu May 22 '13 at 15:47
  • First image also must be visible. And solution can be compatible with fluid layouts. – trante May 22 '13 at 15:50
  • I mean if you create a transparent image with a cross, or generate it dynamically on canvas, then you can put it on top of the other image using absolute positioning. You will have to have event listeners for resize etc to adjust the position and size of course. – akonsu May 22 '13 at 15:58

1 Answers1

3

I would create a wrapper for the both the image and the cross, and have them absolutely positioned within the wrapper. The wrapper itself would be fluid within the DOM, but the image and cross would be absolutely positioned so that the cross appears on top of the image. This can be done by setting the wrapper's position property to relative and using absolute positioning on its children.

As for the cross, I would use an image. This way you can set height and width to 100%, so that it will stretch with the wrapper. To control the sizing you would set width/height on the wrapper element, not the images themselves.

HTML

<div class="wrapper">
    <img class="img" src="actual-image.jpg" />
    <img class="cross-img" src="cross-image.jpg" />
</div>

CSS

.wrapper {
    position:relative;
    width: 150px;
    height: 150px;
}

.img, .cross-img {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
}

.cross-img {
    opacity: 0.5;
}

It's then trivial to show or hide the cross. Here's a jquery snippet:

$('.cross-img').hide();

Here is a jsfiddle demonstrating this: http://jsfiddle.net/J69qR/

bfuoco
  • 715
  • 4
  • 12
  • +1 ...And nice because you could also use a click event on your wrapper to toggle the cross. – markE May 22 '13 at 20:09