Placing Place Holder for Image

Question

I have an image icon in an HTML page that should show right to a label only when some condition is true. If the condition is false, it should not show, but it should still take up the same space.

I'm sure most of you have done something like this and I got a couple of solutions.

1. Put the img tag as usual but add to its style attribute visibility: hidden when the condition is false.
2. Specify the width and height style attribute for the img tag and use a transparent 1 X 1 image when the condition is false.

I don't like either since it seems like pre-CSS 3. Does anyone know the best practice of doing this?

EDIT: When the image does not show, I don't need the image, but I need its space not to disrupt the positioning of the rest of the elements.

Answer 1

CSS 3 isn't really supported all that well and still includes most things from 1 and 2 anyway. I see absolutely nothing wrong with your first option.

option 2 is not as clean but certainly viable if you're expecting it to be viewed by something that doesn't support CSS.

Answer 2

Create div with the size of the image e.g. width/height and show or not the image in the div

Answer 3

The "best practice" here would mean not printing the image at all, if there is no reason to be printing an image. I assume since you mention a 1x1 pixel, that you are simply trying to hide the image altogether. So don't print it!

If your layout needs the image to exist though (let's say you have a link gallery where every link has an image) then you need some sort of icon/picture that indicates there IS NO picture -- something generic like a silhouette or question mark.