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!
Megan posted this at 17:54—24th August 2007.
She has: 10,030 posts
Joined: Jun 1999
If the images are all the same size you can use that as a CSS background, then just change the background on hover. How exactly to do that would depend on the mark-up in your e-Commerce system. You'd need a way to select the product images and apply the effects. If they're linked to larger versions it should be pretty easy - if not, you might have to use some javascript to get the hover to work in all browsers.
Megan
My web design blog
webwiz posted this at 18:50—25th August 2007.
He has: 301 posts
Joined: May 2007
From your example page, I'd go with Megan's solution. For fast rollovers, no preloading, no JavaScript, I recommend Pixy's method: http://clagnut.com/blog/235/.
I use this method a lot. No problems in any browser AFAICT.
Cordially, David
--
"Old web developers don't die, they degrade gracefully..."
jay0316 posted this at 13:17—27th August 2007.
They have: 4 posts
Joined: Aug 2007
No, unfortunately the images are not always the same size. I am able to make the width the same, but the length would change. However, I was thinking there must be a way to put the border in the foreground and the image in the background using the border as a mask for the images, and then changing the border on rollover. So, you would only see the top portion of the images that are longer and then when you click on it you'd get the product page with the large image and description etc. I'm still fairly new to css and php though and didn't know if it's possible to make that happen dynamically, and if so, how?