dgu56

I have been reading the forums for months now, and I have received a ton of great information. It's time to give back a little, I think.

I've noticed many people are having trouble (like we did), with using a simple javascript that would make t-shirts change colors when you roll the mouse over text.

The javascripts we tried were either two part, where we had to put something in the head section, along with the body, or they wouldn't xhtml validate (which our website requires). Anything we used had to be "inline," in that it had to be simple, cut 'n pastable, reside in the "body," and easily configurable.

We simply are not code writers; all we want to do is design and sell t-shirts. But we finally put together a javascript anybody can use as a starter system, and then branch out from there as he gets more comfortable with javascript.

I wrote a blog post about it, with all the links, including a link to download the exact rollover javascript we are using. Just download the javascript and then look at our t-shirt site to see how it all works. You should be able to easily customize it for your site by replacing our images with yours, and using your own color names in place of ours.

The blog article is at greenmanblog.com/archives/157-Rollover-Javascript-for-Changing-T-Shirt-Colors.html

Hope this helps anyone just starting out with a website like we are. And, if anyone has a better rollover javascript, please let us know, will you? The color changing t-shirts are pretty much a "must have" for any t-shirt site.

Dave
Green Man T Shirts

 

Reply With Quote

dgu56

Hey, I just wanted to clarify something.

In the code you will see: <A HREF="url" onMouseover="change1('pic........ and so on.

You probably don't need the HREF="url", so just remove it. The difference is that the HREF="url" makes the rollover text clickable (it's already rollover), and it gets a little confusing. It's cleaner just to have rollover text and not try to make it clickable to a link also. After you remove all the HREF="url"s you will notice that the rollover text no longer is underlined and is not a link to anything anymore, although it still works when the mouse goes over it.

I hope that's clear. Just make it:

<A on mouseover="change1('pic1', .........

I believe there are 6 of those HREF="url"s in the code I provided. Remove them all.

Also, the parts: <p style="margin-left:30px;"> is only just a way to indent. Make it 40px and it indents more; make it 20px and it indents less. Remove the whole thing if you don't need an indent.

Any questions, just post it and I'll try to muddle through it.

 

Reply With Quote

Clobbersaurus

Thanks for the code, it looks pretty clean on your site. I guess my decision now is do i want a clean looking interface for the client or continue to use individual pages for each color to try and rank a broad range of keywords.

__________________
Fishing Shirts

 

Reply With Quote

dgu56

I know what you mean. We've been playing with all the SEO tricks too, but now we're just trying to make a good website for the customers.

BTW, your fishing t-shirt site looks awesome. Somebody definitely knows what they are doing.

Dave
Organic t shirts -Green Man T Shirts

 

Reply With Quote