troubleshooting Question

Mouse rollover effect on thumbnail to show product colors - help

Avatar of mikaelfx
mikaelfxFlag for United States of America asked on
JavaScriptImages and PhotosScripting Languages
9 Comments1 Solution1337 ViewsLast Modified:

I am trying to find a way to showcase a product on my website.

The product comes in 8 different colors. I want to have a Picture of the Product, (lets say it is a t-shirt) and then next to it, above  it, doesn't matter, have another image that shows the 8 colors in swatches that the t-shirt comes in.

Easy enough; however, what I am having trouble finding a tutorial or example of is that I want visitors to the site to be able to mouseover (not click) the color swatches and when the pointer is on a color, the t-shirt image changes to that particular color.

As the visitor rolls over the 8 different color swatches, the t-shirt changes colors.

I have seen this on many ecommerce websites and have done something similar but for the life of me can't find anything that explains how to do this with either CSS or Javascript or maybe jquery.

I suppose CSS would be the best way, but it doesn't matter to me as long as it works and is smooth.

I am reaching out to the experts to help me find somehting on the web that explains how to do this.

Thank you so much for reading my question and I appreciate any help.
Join our community to see this answer!
Unlock 1 Answer and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros