The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Also, Is this the best way to go about this? It seems to take about 8-10 seconds to preload those images, but some of the pages are going to need 2-3 times as many color combinations. If the images aren't preloaded, the effect is lost because it takes a while for the full-size images to load. Is there any way to have the first image appear while the other images are loading?

The way the page is currently written, you cannot change the product info. You would need to make it all a div layer, then swap the data with the same event handler as is used for the swatch.
Start off by putting the data into an array
then rewrite your div layers as needed from the array.

I fixed the &lt;div&gt; tags... they didn't even need to be there. What is it, exactly, that needs to be in one layer... or is it ok now?

What should the arrays look like? I posted the url below so you can take a look... I don't know too much about javascript, so a little more explanation would be very helpful... I'm also not sure how to use the document.write function, and I assume that's what I'll need for the product informationhttp://www.geocities.com/halo.geo/chap/oakley-3a.htm

using document.write to update the product info isnt the best way to go...document.write will actually take everything on your page, delete it, and then output whatever you wanted to write...unless it is called from within a table.
the only two ways i can think to do what you want is either to make all the product info text into a .gif and change that along with the sunglasses when they are clicked...but like you said you could lose the instant switch effect...definetely on slower connections.
OR you could use a form, and have a text box for each category of the products info (price, part num, etc) this way would be much faster...if you need more help send me an email...i'll be happy to offer some assistance.

wimpypenguin - That must be why I couldn't find any example scripts that changed text. I won't lose the effect, but using gifs would add 1k for every color combo... which for this page would mean about 5 more seconds of preloading. Plus, it wouldn't be as easy to change.

I already have 58k worth of images on the page... though most of the pages will have only 5-7 colors... so that'd be around 35k without gifs, 40+ with them. After adding a top navigation bar (10-15k), a side one (text), and other text, do you think that'd be too much? Sorry for rambling off-topic, I'm just trying to think it through.

If you could post an explanation of how to do the text boxes, that'd be great.

Thanks, but unfortunately I've been trying to figure out how this works and I haven't. Is there more to it? I guess I need more detail, including how the info text and main image will be arranged (and "called")

You would call the function in the same call as you use to change the glasses. The text layout, etc depends on you, but you could use approximately the same layout.
Do you know how to code? Or, are you looking for a complete script, design layout? (The design people are salivating
Vinny

Looks nice, Halo It must have been a pain to get the image dimensions for all the different sunglasses exact. One thing I noticed is the product description .gifs are kind of choppy...the images themselves are fine, but they are stretched out beyond their normal size after the onclick event...when you preload them, try to pass the dimensions for each one...
Image18 = new Image(122,80)
Image18.src = "04-090-info.gif"

<BLOCKQUOTE><font size="1" face="Verdana, Arial">quote/font><HR>Originally posted by Vincent Puglia:You would call the function in the same call as you use to change the glasses. <HR></BLOCKQUOTE>

Vinny, how would I do that, though? All the variables in the array (along with the cases)have me confused. I don't know how to get the Frame, Lens, etc to show up at all. It's so different from the simple scripts I've used...

What follows below is something I'm working on currently. It doesn't use &lt;div&gt;ed layers and it writes more than one row of data (the for loop), but that's immaterial. The concept is the same. The code is called from within the HTML page with a simple function call (&lt;script&gt;writeDetails()&lt;/script&gt; ). In your case, you would call it with the onClick event handler you use now. You simply place the new code after the original.
Regarding the case statements: they are there so that the data label (frame,lens,etc) is automatically selected. If you don't want to use them, you can shift your table from vertical to horizontal and simply print the labels on the HTML page and the actual data underneath them in a div.
Finally, you would be using the document.all & document.layers DOMs/write()s (again, the concept is the same).

Here's the code you need. (I didn't test with Netscape, but it should run ok.) Note: you probably have to change the array so that it matches the swatches. I wasn't sure of what belongs to what. Also, I didn't know what you wanted the normal & picture sources for. Finally, I have no idea why you have those blank image source tags.
Your current bill runs:
1) go through the javascript primer at www.htmlgoodies.com
2) buy a javascript book (beginners --&gt; SAM's Javascript in 24 hours; advanced --&gt; Goodman's Javascript Bible and/or O'Reilly's Javascript: the Definitive Guide.

Thanks for all the help. I'll let you know how it works out. I have learned some things the last few days by going through most of that javascript primer at html goodies and looking at other sites, including javascriptcity.com. I intend to get one of those books so I won't have to pester you as much the next time.

On Netscape 4.7 it doesn't give any errors... the product info text doesn't show up when the swatches are clicked. I tried it on Netscape 6 Preview at home and three of those Yahoo/Geocities boxes popped up... there were links inside that went to some directory... can't remember what exactly.

Now, back to the problem at hand. A DIV must have position:absolute before Netscape will let you alter its contents. Unfortunately, an absolutely-positioned DIV floats above the rest of the page and makes it generally difficult to lign it up with the rest of your content.

The solution is to place the dynamic (position:absolute) DIV inside a position:relative SPAN. The SPAN provides a positioning context for the absolutely positioned DIV:

I mean it has no effect compared to what was already on there. Works fine in Explorer still. In Netscape, no errors, but the text that's supposed to be written inside the &lt;div&gt;&lt;/div&gt; tags doesn't show at all.