We've had a few people ask about the inline rollover javascript we use on the Green Man T Shirts website. This is the color-changing script to illustrate the different colors of our organic t-shirts.
Like many others, we had problems using two-part scripts where some of the script had to go into the head section and some into the body section. We use GoDaddy as our host, and we don't have access to the head section of the site (not easily, anyway. There is always user-modified CSS, but we aren't that smart). Plus, any javascript we used had to xhtml validate for us, and that kept creating problems for us code-challenged newbies.
What we needed was a simple javascript we could cut and paste into the body section, and finally we cobbled one together. Look at some of the organic t-shirts at
Green Man T Shirts to see how it works.
Rather than make someone use Firebug and grab it off the site, we just put the entire javascript into a downloadable zip file to study and use. Put the code into a txt file (use Notepad or something similiar) for easy viewing. Once you see it and compare it against our site it's pretty easy to see how it works.
Just replace the images we made with images of your own (Please! It's bad form to "borrow" bandwidth); use your own color terms; add or delete lines depending how many colors you wish to show; and you are all set. Just cut and paste it into the body section of your website.
We used t-shirt mockups generously provided by Tom Neal, and we found out about
him from the great guys over at
Assault Blog. They have a link where you can download the free mockups. In the future we might be buying the
GoMedia Mockups. They look pretty darn good.
Hopefully this will help other t-shirt guys like us who are more into designs and shirts and styles, rather than writing xhtml, CSS, and javascript.
Download the Rollover Javascript below:
Rollover Javascript
