Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Change t-shirt color on mouse over for shirt mockups

11:10 am on May 4, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 16, 2005
posts: 19
votes: 0

Hi All,

I was building a t-shirt printing online shopping website using Opencart and I have done almost every possible changes but stucked at one feature:

I have design image with me and a mockup template to make real looking mockups but that I would like to do using php or imagemagick, so that it can automatically changes shirt colors on mouseovers by merging 3 images (white base, color layer, design image) just like it done on Cafepress or Zazzle.

Can anyone here guide me how to do that using php?

A command line example is given at - [imagemagick.org...] but I want it in php.

12:15 pm on May 4, 2012 (gmt 0)

Administrator from US 

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
votes: 87

PHP doesn't do mouseovers, what you want is Javascript as it would be done in the browser.

You can still do it in PHP if you display a color palette of choices on the screen and make each color clickable. If someone clicks the color then redisplay the page with the new shirt color clicked shown.

I would implement both so the site works for people with and without javascript enables.
12:26 pm on May 4, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 16, 2005
posts: 19
votes: 0

Sorry for confusion .... mouseover should display image which are generated by php.

My main concern is to create those images programatically using php.
2:22 pm on May 4, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
votes: 7

Have you considered making an image where the shirt is actually transparent, surrounded by a white field or whatever color is appropriate, and just change the background color? Then you need only one image.

2:48 pm on May 4, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 5

For a variety of reasons, mostly my own laziness, I have been unable to use the popular interfaces like iMagick. So I execute ImageMagick commands in PHP using either system() or passthru(), as appropriate. It's not very elegant in practice, but it works and it makes translating the examples on imagemagick.org dirt simple.
3:47 pm on May 4, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

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>

(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) {

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.
4:37 pm on May 4, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 16, 2005
posts: 19
votes: 0

Thanks rocknbil for the JS stuff, but I would like to use Ajax and php to generate images and store them in cache rather than pre-loading all of them in page. Well but thats not a problem.

As you said t-shirts kinda images have details like shading, folds etc and that needs to be taken care. Check the link I posted from imagemagick, thats good but how to do that in PHP?
6:06 pm on May 4, 2012 (gmt 0)

Moderator from CA 

WebmasterWorld Administrator httpwebwitch is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 29, 2003
votes: 0

The switching background color is a neat idea.
But I can't imagine it'll be easy to make a transparent shirt. (!) Maybe in photoshop if you play with lightness and alpha masks... ?

how about, load up your white shirt in Pshop, change the display property of that layer to "hard light" (?), put a colour in a layer behind it... gee I don't use PhotoShop every day so I forget the best way to do it but I know it's possible and not that difficult.

Ultimately you'll want a flat rendering of your blank shirt in each of your colors, and the shirt design will be layered on top of that.

The PHP Imagick functions are good. rainborick says he uses passthru, but it's so much nicer to do it using the Imagick module.


if the imagick functions don't work, you may not have them enabled in your PHP installation. Get them installed. It's a good thing to know how to do this; if it's your first time, it surely won't be your last time.

get thee to a command line.

depending on your flavour of linux...
do this:

> yum install ImageMagick.i386
> yum install ImageMagick-devel.i386
> pecl install imagick

or use apt-get or aptitude instead of yum... search the interweb for instructions for your particular distro of Linux

then create an inclusion file for the extension:

> echo "extension=imagick.so" > /etc/php.d/imagick.ini

then restart apache & php

> /etc/init.d/httpd restart
> service httpd restart
> service httpd graceful

last tip: don't generate your t-shirt designs on demand with AJAX. Pre-generate them so they're cached on the server as a SPRITE. That means all the tshirt color variations are in one image, it loads once on pageload, and you show/hide them by changing the CSS.

Explore how to use sprites:

Imagick should be very good at making sprites.
11:22 am on May 5, 2012 (gmt 0)

New User

10+ Year Member

joined:Nov 16, 2005
posts: 19
votes: 0

It can be exactly same as the Chrome Key stuff given at imagemagick website but apart from that I need to merge transparent design image over that with folds and swirls appear on design as well.

I searched net and found lot of people looking for this solution but none of them actually posted any possible solution or coding for that

Some youtube videos for that - [youtube.com...]
Source files :

Please help !