The overlay is good for conceptual stuff like cars, but products like T shirts will require actual photos as there are too many variables in the images to just do a color overlay. Probably worth a try.
My main concern is to create those images programatically using php.
But you'd still have to use Javascript to create the mouseover effect. Sure ImageMagick can "do" this, but if these are product images programmatically outputting them is going to give results that aren't consistent with the actual product. You are far better off using static images, even if you need to take one of them and tweak them in Photoshop. *You* can see if a color approaches the actual item or not, a computer cannot.
Look how simple and solid this complex and unreliable approach can be. :-)
What you'd do in PHP is output hidden elements containing the images so they are already loaded and there's no delay on mouseover:
<p class="hidden-img"><img id="green-tee" src="/images/green-tee.jpg" alt="Green Tee"></p>
<p class="hidden-img"><img id="blue-tee" src="/images/blue-tee.jpg" alt="Blue Tee"></p>
<p class="hidden-img"><img id="red-tee" src="/images/red-tee.jpg" alt="Red Tee"></p>
<p class="hidden-img"><img id="gray-tee" src="/images/gray-tee.jpg" alt="Gray Tee"></p> <!-- this is your "default" -->
p.hidden-img { display:none; }
Then your color swatches would call a
Javascript program on mouseover:
<ul id="colors">
<li><a id="green-link" href="/images/green-tee.jpg" onmouseover="swap('green-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Green</a></li>
<li><a id="blue-link" href="/images/blue-tee.jpg" onmouseover="swap('blue-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Blue</a></li>
<li><a id="red-link" href="/images/red-tee.jpg" onmouseover="swap('red-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Red</a></li>
</ul>
(Of course, you wouldn't use inline Javascript like that, you'd externally attach the behavior to these links.) #colors li, colors li a { display: block; width: 100px; height: 100 px; list-style:none; outline:none; text-indent: -50000px; }
#colors li #blue-link { background: #0000ff; }
#colors li #green-link { background: #008040; }
#colors li #red-link { background: #ffff00; }
Now you have your target object,
<p><img id="display-image" src="/images/gray-tee.jpg" alt="gray Tee"></p>
and the
Javascript function "swap" would do **something** like this.
function swap(id) {
var targ = document.getElementById('display-image');
var src = document.getElementById(id);
if (targ && id) {
targ.src=id.src;
}
}
None of this is copy and paste code. It is typed on the fly and presented to give you an idea of how simple this can be. No monolithic libraries, no jQuery, simple. Don't get me wrong, jQuery is awesome, but it would be overkill for small tasks like this.
