Jan 27
Image on top of an image
I build a site for my sister-in-law’s business at www.cfeinvestments.com. She asked me if I could put a “Sale Pending” sign on sold property. Sure, I can do anything! But how would I do this and make it as easy as possible. A few ideas came to mind:
- Use some fancy GD library or ImageMagik functions to create a new image on the fly.
- Get the image size using PHP and create a div to match that size. Use the image as the back-ground of the div and put the banner inside the div. Then use javascript to link to the full-size image.
While these ideas are certainly doable, they weren’t worth my time. I’d rather just write a message above the image than go that far. There had to be a way to put an image on top of an image so I could still use a link and all. After Google Talking with a friend, between the two of us we came up with a working solution. It seems to work well in both IE & Firefox.
First, I create a gif image in photoshop with a transparent background. This is the image:
And this is the image I wanted to put it over:
Here is the code I used:
<a href="117_med.jpg">
<img src="sale-pending.gif" id="pending" />
<img src="117_med.jpg" id="houseimg" />
</a>
And the CSS:
#houseimg {
border: 1px solid blue;
}
#pending {
position: absolute;
border: 0;
padding: 1px;
}
And the result:
Then, maybe for fun we can add some transparency to the image style:
