I have a site that I'm working on where the products are going to be generated dynamically using php. I want each one to have a green border around it with rounded corners, and then when you rollover it, I want it to change the border color to orange. We have all the product images with a white background, and there are too many to actually add the border to the photo. So, we need to wrap the pictures with a colored border and rounded corners somehow and get them to change on rollover.

Here is an image I put together in photoshop of the products in their normal state and one in a rollover state. http://www.coastalpet.com/rollover.jpg

I think it will be easy to do with square corners, but the rounded corners are making it difficult.

Do you know how I could make this work?

Thanks!

Yeah, I mean the big question is: will the thumbnails will always be the same size?

Could do something like this:

<a href="#" class="imgWrapper"><img src="whatever.jpg" /></a>

a.imgWrapper {
background: url(top-image-bg.gif) no-repeat 0 0;
padding-top: 10px; /*However tall the top portion of the image is*/
}

a.imgWrapper img {
background: #F1763B url(bottom-image-bg.gif) no-repeat 0 100%;
padding-bottom: 10px; /*however tall the bottom portion of the image is*/
}

a.imgWrapper:hover {
background: url(top-image-hover-bg.gif) no-repeat 0 0;
}

a.imgWrapper:hover img {
background: #395932 url(bottom-image-hover-bg.gif) no-repeat 0 100%;
}

Or you could combine the two top images and two bottom images into 1 image for the bottom and 1 for the top and shift the position, using the CSS sprite technique.

Not saying this code will work exactly when you plug it in, depends on how big some of the images are, and so forth.

davist11,

I'm trying out your solution and I think that I misunderstood your origional now that I'm getting into it. I'm not following what your suggesting. Can you explain the 2 hovers? I am working with 3 images right now (product.jpg, green-border.gif, orange-border.gif). Are you suggesting handling it differently?

I've seen the shift method your talking about, but I with what I'm working with it would be one image instead of 2 (green-border.gif + orange-border.gif = border.gif) So, I'm not sure what the other images are.

Could you place my images in the code in the proper place and explain a little bit more about what you are doing? Thanks again!

Ok. I think I'm seeing what you are doing now. It seems like you are using the top border bars and bottom border bars as the four images. That would allow for images of different sizes. However, what we would like to do is to keep them all the same size although the product images are different sizes.

Is there a way to use a gif that has the border with a hole in the middle to mask off the image. It would be nice to be able to do that for the green and orange borders, and then put them in front of the product image somehow to mask it off so they are all the same size.

Thanks!

davist11,

I updated the page that I linked to above with something that is very close to working the way I want it to. It works in firefox perfectly; however, in internet explorer 6 & 7 the link doesn't work. I made the first box link to google. the others do not actually link to a site.

Is there a way to make this work with IE?

In IE6 it doesnt work because you are using the hover state on the div. Hover in IE6 only works on anchor tags. You don't need those extra divs though, you can attach one of the backgrounds to the anchor, and the other to the image.

Because z-index in IE sucks. I thought you wanted them to be able to be different heights?

Originally, we were thinking that we wanted them different heights, but we decided that it would look a lot cleaner to have them be the same size. We are going to have several rows of products and having a few big ones will throw things off and it will look messy.

Is there any other way we can handle the z-index issue or is there something that would do the same thing?

The product images aren't the same size, and they are coming from a database with a couple hundred images. There aren't just a couple images, so resizing them all to be the same height is unrealistic for us.

Is there any other way we can handle the z-index issue or is there something that would do the same thing?

Thanks!

Thanks again davist!

Only one problem left. In IE 6 & 7 I can only get to google if I click the outside border. It won't let me click the product image and get there.

Here is where I'm at with this right now. http://www.coastalpet.com/remington/product_results.php?search=301

IE is still giving me problems. I still can't click the image and go on to the next page. I have to click the border to get there. I tried adding another anchor tag around the image, but that through everything off. So, if this is the last problem. Any more ideas?

Thanks!