An example would be where you would need to make product links visually say “on sale”. And to do that without having to recreate thousands of images and reupload them.
A preview of what we are trying to achieve.

A few things that I want to keep in mind.

1. Usability for client
2. Reusable code/images
3. Accessibility
4. Valid xhtml

Note: Gladly you won’t need to compromise with any of these items to achieve the goal.

Let’s start with the basic html we will need.

Note: ‘ »»’ is for readability on this page, they are not part of the code.

<a href="#" title="View Item 602. On Sale Now!" class="box2">  »»<img src="/post-content/onsale/602.jpg" alt="View Item 602. On Sale Now!"  />  »»

<img src="/post-content/onsale/saleThmb.png" alt="This item is on sale!"   »»

height="0" width="0" class="sale" border="0"  /></a>

We have a link that has two images inside of it. The first image is the main image of the actual product we are trying to be linked. The second image is what we are going to use for the “on sale” part of the final link.

“Why does the second image have a height and width of 0″, you say? Ah, we’ll get to that in a bit.

Let’s get to the css first. We’ll start with the css for the link.

.box2 {height:120px;

margin:6px 6px 0px 0px;

width:120px;

z-index:50;

position:relative;

float:left;

}

We have a set height and width as well as a nice margin for the link. The margin is if there are going to be multiple links next to each other. They will line up nicely.

What we are using z-index for

I have set a z-index for the link. The reason that it is set at 50 is because I like to have some leeway with which way I can go on my z-index, and I don’t like to go into the negatives or go up or down by 1(it’s hard to check for errors). Also if you want z-index to work you will need to set a position for that element. I am using relative positioning.

Now the code for the images

Now let’s look at the css for the images. Starting with the first and then the second.

.box2 img{z-index:45;

position:relative;

height:120px;

width:120px;

border:0px;

}

.box2 img.sale{position:absolute;

z-index:55;

top:0px;

left:0px;

border:0px;

height:120px;

width:120px;

}

Now sense we didn’t want to recreate the image with the “on sale” on the original image we will need to put it on top of the other image. We accomplish this with a transparent png(or you could use gif) and z-index. We put the z-index for the image we want to be on top at a higher z-index, and the lower image to have a lower z-index. (Makes sense) We also set the position of the second image to absolute. This allows us to place that image wherever we want inside the link. And if we had not set the link to have a position the second image would not stay inside the link. Once we set the position we can place the image at the top and left of the link, with top and left set at 0. Finally we set the height and width of the second image with css.

Now the reason we set the height and width of the second image in the xhtml to 0 is so that if the css or images are disabled the image will not be visible. I would rather my layout break, and break the way I want it to, than have an extra image laying around on the html page.

Viola! You know have reusable images and code for your product links. This will work in IE, Safari, and Mozilla browsers. The xhtml validates, and it’s totally accessable.

You can view the final result and copy the code at this link.
View
Final Result

Download
Example Files

I am writing an article about a more advanced way to do this, and it will be posted soon. So check back within the next week!