Is this a good approach?

[rekk]

Hi people who know javascript better than me. I've been looking for a nice simple way to get an onclick action on some color samples. The idea is there are color samples, the user clicks on a sample and a photo elsewhere on the page changes color. This I know how to do, but only with images. Would it get hopelessly complicated if I made clickable divs with the bkgrnd colors that I need? Am I on the right track? I'd love to hear your suggestions. Maybe there's another way other than js. I really appreciate simple code... Thanks for the advice!:D

[djr33]

I don't know the best ways to do this with Javascript, but overall it should be workable.
For an element with a direct color in its style, you can access that and use it.
For example, element.bgcolor (or whatever the correct syntax is for the particular element/property) should get you the value you need for this. For images, the way that I know about to get a color is to use an image input (<input type="image">) in a form that submits to a PHP script; the PHP script then gets the coordinates of the click and you can find that pixel using an image function library then check its colors. There may be a similar function in Javascript.
There isn't exactly a "simple" way to approach this in general, but there may be a simple code if all you want is background-colored divs that you can click to change the page. That should be easy enough.

If you give more information, someone can probably make an example script.

[rekk]

I've only just started learning PHP (meaning I modified my first bit of PHP for the first time this week), so that's just making it more complicated, at least for me. Here's the page (http://www.bend-music.com/?page_id=6) in just straight html. The color swatches run along the bottom and the idea is to have a js image swap onclick that will change the main T-shirt image. Honestly, I'll just go ahead and save images for each color (right now they're divs with bkgrnd color defined), since that is what I know how to do. I wanted to run it by you though cause I hate mucking up unnecessary code. Thanks for the input!!!

[djr33]

Oh, I see. If you wanted to change the page based on the actual color of that div, the approach would be different.

Considering you are working with only 5 colors, I would just name each of them and name an image the same thing:
changeimgcolor('blue') for the blue one, for example.
Then just have images called "blue.jpg" etc.

Setting up a function obviously makes sense, but trying to automate it more than that seems overly complex to me.

[rekk]

Well, okay. I wasn't sure. Thanks for the input! Was my first impulse to start saving images, but I thought maybe there was something that I wasn't thinking about here. Thank you so much for helping me think this through! You get a gold star for today!:)