Mutually Exclusive Options? Options

[Loren]

Please disregard that code at the end of my last post.

I really botched that copy/paste job.

ANYWAY, here's the rest of my response.

[quote name='Christian J' date='May 16 2012, 12:19 PM' post='67862']
Sounds very similar, programming-wise.[/quote]
I chose to do the aquarium project that way because I had already conceived of the lava lamp idea...but I thought I would have an easier time both explaining the idea and executing it initially if I went with the aquarium idea first.

[quote]I thought you were going to use separate drawings for each layer (water, gravel, fish etc in the aquarium). If you take pictures it might be tricky to cut out the different parts.[/quote]
That was the original idea, but my aquarium drawings looked horrible compared to what I was finally able to do with the lava lamp pictures. Those wound up going much faster, and being much easier than I thought they would be. I'll take all of that that I can get.

[quote]The exact folder doesn't matter, as long as the paths in the javascript and HTML finds the images. More descriptive file names might be easier.[/quote]
Ok, I think that answered one of my questions...it will look for a matching filename in the source folder. You don't have to designate a specific URL.

[quote name='Christian J' date='May 16 2012, 12:19 PM' post='67862']No, in the start tags:

CODE

<select id="foo" onchange="displayResult();">

[/quote]
Ok, I now have that in my code, and it works great. It tells me in an alert box exactly which options have been chose, as soon as one is selected. I tried to make it only report the one that was entered, but all attempts to specify an element id like before failed. I'm not sure why, but it's probably that I'm putting it in the wrong place, or formatting it incorrectly.

[quote]
You should use a Doctype for CSS to work properly. See the entry in the FAQ linked at the top of this page.[/quote]
I did, I just cropped it off when I copied and pasted it over.

[quote]The first SELECT menu (with the ID "lamptype") is incorrect (javascript can't go inside OPTION elements).[/quote]
I'm a dingleberry...it didn't say JavaScript, so I forgot that was what it was.

[quote]STYLE elements must be in the HEAD section. [/quote]
Got it. Thanks!

[quote]Depends on the selector. See e.g. http://htmlhelp.com/reference/css/structure.html[/quote]
Ok, I've read the section and bookmarked it. I hope it makes more sense to me later.

[quote]It's better to write HTML "by hand" (in a text editor), even though Dreamweaver is said to be among the better HTML editors.[/quote]
I use the split-screen editor in Dreamweaver, which has a text editor to the left, and a live preview to the right. It looks like this:

That is a final lamp composite over to the right, but it was rendered using multiple style elements, and NOT hooked into the options at all. It was just to see what it would look like when it was done, and I really like it. I hope i can make it work for real one day soon!

[quote]I think you mixed up IMG elements and image files. My idea was to only use one IMG element for each category, say one IMG for gravel color, one for fishes, etc, all stacked in front of each other with CSS. Then your javascript gives each category IMG element different SRC values, depending on what the user has selected, and only then is one of the image files for that category used. This way the script never loads more image files than the total number of categories.[/quote]
That is exactly what I did, and I like your idea. That is what I'm going to try to do.

[quote]If you stack images on top of each other they can't be saved as a single image, unless the user takes a screenshot. Maybe it's possible to merge images with Flash or PHP, can't say.
Well that is ok. Maybe I can eventually allow people to output an HTML file that they can load later. It would really only need to have the 4 variable values represented.

[quote]Flash should be well supported, except for on mobile phones. If you don't want to use javascript either, PHP might be a better choice. Or you could supply a message in a NOSCRIPT element that the application needs javascript to work. It all depends on the importance of the application --if it's just for fun I'd stick with javascript or Flash, if it's for a business that might work too (with some more time spent on "graceful degradation").
[/quote]
I think I'm going to stick with what I have going currently. I think I can actually increase my fault tolerance threshold using if/then/else conditions. I just remembered that the "fillcolor" will be dependant upon whether you select a lava lamp or glitter lamp. If you select lava, it will display the lava image for "WHITE", if you choose glitter, it will display the glitter image for WHITE. If/Then conditions will work for that. And I've been doing some research...I've actually found the place that makes this particular lamp style, and I'm seriously considering buying some so that I can mod them and sell them. I started looking at this thing develop, and I thought "Why not?" If it works right, I could actually USE this fun thing as a tool to take orders for custom lamps! I'm seriously considering that...
[quote]You can make the GIF image files themselves partially transparent, so there's no need for CSS opacity really (I suspect it would just look messy). PNG images can also use gradient transparency (known as alpha transparency).
[/quote]
Thanks! I tried to do that with a GIF, but I saw no way to do it. I can make those water-tinting images PNG files, and hopefully eliminate the need to use CSS transparency.

[EDIT] I have no idea why these quotes aren't working, but I probably did something stupid.

This post has been edited by Loren: May 16 2012, 08:09 PM

[Loren]

I'm sorry for all of these posts where I'm floundering.

But I have some good news. I was FINALLY able to switch option selections, and swap an image out!! Wooo!!

Now I have to figure out how to get ALL of the 4 option sets to work. Based on what I've already learned, I think I can do it eventually (only the first option set works right now).

THEN I have to get the 4-way image containers code back in, and integrate it.

I took it out because I wanted to simplify things as much as I could, to try and figure out what I didn't understand so that I could move on. Now that I've almost gotten a handle on a part that I've been struggling with forever, I'm almost ready to bring the containers back.

Here is the code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lamp Builder</title>

<style type="text/css">
body
{
background-color:hsl(220,05%,15%);
}
</style>

<style type="text/css">
img
{
position:absolute;
left:250px;
top:000px;
z-index:1;
}
</style>
<div class="img">
<img src="http://i34.photobucket.com/albums/d106/localgods/empty.gif"
width="176" height="515" /></a></div>

<br />
<br />
<br />
</head>

<body>

<img id="imageToSwap" src="http://i34.photobucket.com/albums/d106/localgods/empty.gif" />

<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder">
<select id="lamptype" onchange="swapImage()">
<option value ="http://i34.photobucket.com/albums/d106/localgods/empty.gif">-Select One-</option>
<option value ="http://i34.photobucket.com/albums/d106/localgods/GREY.gif">Lava Lamp</option>
<option value ="http://i34.photobucket.com/albums/d106/localgods/glittersilver.gif">Glitter Lamp</option>
</select><br />
<br />

<font color="white">Choose a Wax Color</font><br />
<select id="fillcolor" onchange="swapImage()">
<option value ="http://i34.photobucket.com/albums/d106/localgods/GREY.gif">-Select One-</option>
<option value ="http://i34.photobucket.com/albums/d106/localgods/WHITE.gif">White</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Mint Green">Mint Green</option>
<option value ="Fluor. Green">Fluor. Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Fluor. Blue">Fluor. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
<option value ="Black">Black</option>
<option value ="Brown">Brown</option>
</select><br />
<br />

<font color="white">Choose a Liquid Color</font><br />
<select id="liquidcolor" onchange="swapImage()">
<option value ="-CHOOSE ONE-">-Select One-</option>
<option value ="Clear">Clear</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
</select><br />
<br />

<font color="white">Choose a Base/Cap Color</font><br />
<select id="basecolor" onchange="swapImage()">
<option value ="-CHOOSE ONE-">-Select One-</option>
<option value ="Red">Red</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
</select><br />
</form><br />
<br />
<br />
<br />
<br />

<button type="button" onclick="randomize()">Randomize!</button>

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

<p>&nbsp;</p>
</body>
</html>

This post has been edited by Loren: May 16 2012, 11:44 PM

[Christian J]

Aha! So, when you make a selection, the OPTION's are already set up to do that, right? Each option has an option value, after all. Will it automatically associate files and option values of the same name, or do I have to set a URL for each one?

If an OPTION element's VALUE is the same as the image file's relative URL it can be used right away. You can of course also use other OPTION values, and map them to the image URL in various ways, but the above seemed like the easiest solution (at least until you want to use different image URLs depending on choices in other SELECT menus).

Depending on which option someone chooses, a corresponding image will be displayed for each element...because it associates an option value with an image id.

Or more precisely, each SELECT menu is associated with an IMG element's ID, and each OPTION value is associated with an image file's URL.

(alt = "") would be alt "Green Lava", or whatever.

The ALT attribute is required for IMG elements in valid HTML (even if you keep it empty), that's why I included it out of habit. But that's not important at this stage, really.

[Christian J]

The exact folder doesn't matter, as long as the paths in the javascript and HTML finds the images. More descriptive file names might be easier.

Ok, I think that answered one of my questions...it will look for a matching filename in the source folder. You don't have to designate a specific URL.

They are both URLs, but the short one is relative. See also http://htmlhelp.com/faq/html/basics.html#relative-url

I just remembered that the "fillcolor" will be dependant upon whether you select a lava lamp or glitter lamp. If you select lava, it will display the lava image for "WHITE", if you choose glitter, it will display the glitter image for WHITE. If/Then conditions will work for that.

That's a case where it could be impractical to use image file URLs in the OPTION values. Maybe you could use something like this instead:

CODE

<select id="lamptype">
<option value="lava">Lava</option>
<option value="glitter">Glitter</option>
</select>

<select id="fillcolor">
<option value="white">White</option>
<option value="red">Red</option>
</select>

<script type="text/javascript">
var lamptype=document.getElementById("lamptype");
var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

var fillcolor=document.getElementById('fillcolor');
var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value);

if(lamptype_value=='lava' && fillcolor_value=='white')
{
    fillcolor_value='white.gif';
}
else if(lamptype_value=='glitter' && fillcolor_value=='white')
{
    fillcolor_value='glitter.gif';
}
</script>

[EDIT] I have no idea why these quotes aren't working, but I probably did something stupid.

The BBCode code needs to be correct, but even then the forum script can mess up if we use too many quotes.

[Christian J]

I'm sorry for all of these posts where I'm floundering.

It does make it harder to know which ones to reply too...

But I have some good news. I was FINALLY able to switch option selections, and swap an image out!! Wooo!!

CODE

<style type="text/css">
body
{
background-color:hsl(220,05%,15%);
}
</style>

<style type="text/css">
img
{
position:absolute;
left:250px;
top:000px;
z-index:1;
}
</style>

Those two CSS blocks can be merged into one STYLE element.

CODE

<div class="img">
<img src="http://i34.photobucket.com/albums/d106/localgods/empty.gif"
width="176" height="515" /></a></div>

<br />
<br />
<br />
</head>

Don't see the purpose of the above image, in any case such HTML must be in BODY, not HEAD.

CODE

<button type="button" onclick="randomize()">Randomize!</button>

You don't have any JS function called randomize() in the code example, so the button will not work.

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

The curly braces are used incorrectly (you only need one pair above).

CODE

var image = document.getElementById("imageToSwap");

You only need to define the "image" variable once.

CODE

var dropd = document.getElementById("lamptype");
image.src = dropd.value;

This tries to get the value of the SELECT element with the ID "lamptype", not the selected OPTION element...

[Loren]

Ok, first of all, I merged those 2 style elements, eliminated that superfluous image reference, and I just had that button say "Randomize!" in lieu of saying "Show Your Lamp!". It's just a placeholder for now. I should have said something about that.

Well I did all of those things, and the page still works as well as it did (only the first option set)!

Howerver, when I try to turn this:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

...into this:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

...it doesn't work. In fact it only really works well if you take everything off except of the first iteration of that code...the one referencing the "lamptype" select id.

You said something about those needing to reference individual option choices? You said "shape". "color", and "pattern" in your previous example, so I thought I was supposed to be referencing "lamptype", "fillcolor", etc. There needs to be one of those for each possible selection, in each SELECT id?

If there is no way to have an option value be a URL for the purposes of tracking elsewhere, then I will have to change the option values back to their "color" equivalents. I think that I can still use that simple yet effective method for the "basecolor" and "liquidcolor" images, but I will need the option value of "lamptype" to be simple (not a URL) for the purposes of comparison in the next part (filltype...which it looks like I'll have to replace the URL's within, as well). Is this right?

I was going to try and see if I could just get all 4 SELECT id's to display an image before I tried to worry about replacing the 4 containers or setting up the if/then conditionals, bit that's just my desire to continue building off of what's working...but it looks like I'm going to have to destroy that in order to make it better...which is always scary. Well you know how it is when you strive really hard to accomplish something, I'm sure. You don't want to let go of it.

But I will, because I think it will be worth it to make the whole thing work smoothly!

This post has been edited by Loren: May 17 2012, 08:49 PM

[Loren]

And one more dumb question...can I still use the "swapImage" command in the options, and use the 4 containers, if I use the "If...Else" code you provided? I really like the way that works.

If so, how do I reconcile this code:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    
};
</script>

...With this one?

CODE

<script type="text/javascript">
var lamptype=document.getElementById("lamptype");
var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

var fillcolor=document.getElementById('fillcolor');
var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value);

if(lamptype_value=='lava' && fillcolor_value=='white')
{
    fillcolor_value='white.gif';
}
else if(lamptype_value=='glitter' && fillcolor_value=='white')
{
    fillcolor_value='glitter.gif';
}
</script>

I'm going to work on this until I pass out. Wish me luck!

[EDIT] Oh, and DW says there's a syntax error on this line:

CODE

var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

But I don't know where it might be...

This post has been edited by Loren: May 18 2012, 12:31 AM

[Loren]

One MORE dumb question:

Is it possible to assign a selection value AND an image URL to a selection? I've been trying for a long time now, but no dice.

That way I could still use the swapImage code and track that variable at the same time.

Oh well...I have to give up for the night...sigh.

This post has been edited by Loren: May 18 2012, 01:10 AM

[Christian J]

when I try to turn this:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;    
}
{
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

...into this:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

...it doesn't work.

Both are incorrect actually. I recall you got this working earlier in the thread (with the alertboxes)? Anyway here's one way to do it with examples of two SELECT menus):

CODE

function swapImage()
{    
    var lamptype=document.getElementById("lamptype"); // get SELECT element with that ID    
    var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value; // selected OPTION value
    document.getElementById('lamptype_pic').src=lamptype_value; // set SRC of IMG with this ID to the above OPTION value

    var fillcolor=document.getElementById("fillcolor");
    var fillcolor_value=lamptype.getElementsByTagName("option")[fillcolor.selectedIndex].value;
    document.getElementById('fillcolor_pic').src=fillcolor_value;

    // repeat for each additional SELECT menu here
}

Note how you need a separate IMG element for each SELECT menu.

If there is no way to have an option value be a URL for the purposes of tracking elsewhere, then I will have to change the option values back to their "color" equivalents. I think that I can still use that simple yet effective method for the "basecolor" and "liquidcolor" images, but I will need the option value of "lamptype" to be simple (not a URL) for the purposes of comparison in the next part (filltype...which it looks like I'll have to replace the URL's within, as well). Is this right?

Yes. Here's one way to map OPTION values to image URLs:

CODE

function swapImage()
{    
    var lamptype=document.getElementById("lamptype");
    var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value;
    if(lamptype_value=='lava')
    {
        document.getElementById('lamptype_pic').src='lavalamp.jpg';
    }    
    else if(lamptype_value=='glitter')
    {
        document.getElementById('lamptype_pic').src='glitterlamp.jpg';
    }
    
    var fillcolor=document.getElementById("fillcolor");
    var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value;
    if(lamptype_value=='lava' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='lavawhite.jpg';
    }
    else if(lamptype_value=='glitter' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='glitterwhite.jpg';
    }
    else if(fillcolor_value=='red')
    {
        document.getElementById('fillcolor_pic').src='red.jpg';
    }
}

Note that in the second code block (for the fillcolor SELECT menu), the white fillcolor image will be different depending on what you selected in the lamptype menu, but the red fillcolor image will be the same regardless of lamptype. EDIT: I made a few mistakes at first, hope it's correct now.

(If the javascript syntax in the above examples don't make sense, maybe should study basic function syntax, IF/ELSE statements and comparison operators.)

I was going to try and see if I could just get all 4 SELECT id's to display an image before I tried to worry about replacing the 4 containers

Didn't quite follow that. The basic idea is still to use one IMG element for each SELECT menu, right?

This post has been edited by Christian J: May 18 2012, 11:43 AM

[Christian J]

If so, how do I reconcile this code:

*snip*

...With this one?

Don't. Use the examples in my previous reply instead.

I'm going to work on this until I pass out. Wish me luck!

It's good to sleep sometimes also.

[EDIT] Oh, and DW says there's a syntax error on this line:

CODE

var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

But I don't know where it might be...

Sorry I made a typo, that should be like this (without the ending parenthesis character):

CODE

var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value;

[Christian J]

Is it possible to assign a selection value AND an image URL to a selection?

You mean an OPTION value? You can only use one value, but there are other ways. The best in this case should be to only use the value to identify the selected OPTION, and then map that to different things depending on context, like in my previous example where I determine image file depending on the combination of both lamp type and color (at least if the color is white).

I've been trying for a long time now, but no dice.

In general it's better to study than using trial and error, otherwise you may end up with things that seem to work but are actually quite buggy.

[Loren]

Amazing!!

Man, I'm going to start all over when I get home...but I'm not dreading it...I'm actually excited! I think I finally understand a lot that mystified me before.

Thank you so much again, Christian...I can't even tell you how much this means to me. If I can get it together to turn this little project into a business, I will definitely send you a couple lamps of your own design. That is a paltry reward for all you've done for me, but maybe one day soon I can donate some more to you, or this site.

But in the meantime, I have one question. If I take out the "onchange swapImage" from the select menus, and put it into the code which comes after like you showed me, will it still work the same way? I guess I'll go ahead and try it, since I'm basically starting over anyway.

[EDIT] Oh, and one more question...

Should I start trying to put this back together without the image elements for now, or should I be building them in as I go?

This post has been edited by Loren: May 18 2012, 02:30 PM

[Loren]

And now the mandatory dumb question.

In your example, what does "('lamptype_pic')" mean? I think this is a fundamental step I'm missing. Since I can't go directly from selection to URL in this case, I'm trying to go from selection to select id to URL. Where does "('lamptype_pic')" fit into this? Is this a default image that gets swapped out with different URL's? If so, then I have to say that I don't understand how this part works still.

Here's my new code. I tried to keep it to the first couple of options and get those working before I tried to replicate it for the rest of the options and select menus, but I can't get it to work.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lamp Builder</title>

<style type="text/css">
body
{
background-color:hsl(220,05%,15%);
}
img
{
position:absolute;
left:250px;
top:000px;
z-index:1;
}
</style>
<div class="img">
</a></div>

<br />
<br />
<br />
</head>

<body>

<img id="imageToSwap" src="http://i34.photobucket.com/albums/d106/localgods/empty.gif" />

<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder" onchange="swapImage()">
<select id="lamptype" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="Lava Lamp">Lava Lamp</option>
<option value ="Glitter Lamp">Glitter Lamp</option>
</select><br />
<br />

<font color="white">Choose a Wax/Glitter Color</font><br />
<select id="fillcolor" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="White">White</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Mint Green">Mint Green</option>
<option value ="Fluor. Green">Fluor. Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Fluor. Blue">Fluor. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
<option value ="Black">Black</option>
<option value ="Brown">Brown</option>
</select><br />
<br />

<font color="white">Choose a Liquid Color</font><br />
<select id="liquidcolor" onchange="swapImage()">
<option value ="-CHOOSE ONE-">-Select One-</option>
<option value ="Clear">Clear</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
</select><br />
<br />

<font color="white">Choose a Base/Cap Color</font><br />
<select id="basecolor" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="Crimson">Crimson</option>
<option value ="Strawberry">Strawberry</option>
<option value ="Red">Red</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Topaz">Topaz</option>
<option value ="Lime Green">Lime Green</option>
<option value ="Mint Green">Mint Green</option>
<option value ="Green">Green</option>
<option value ="Hunter Green">Hunter Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Sky Blue">Sky Blue</option>
<option value ="Blue">Blue</option>
<option value ="Midnight">Midnight</option>
<option value ="Lavender">Lavender</option>
<option value ="Purple">Purple</option>
<option value ="Violet">Violet</option>
<option value ="Light Pink">Light Pink</option>
<option value ="Dark Pink">Dark Pink</option>
<option value ="Fuscia">Fuscia</option>
<option value ="Black">Black</option>
<option value ="White">White</option>
<option value ="Grey">Grey</option>
<option value ="Metallic Silver">Metallic Silver</option>
<option value ="Metallic Red">Metallic Red</option>
<option value ="Metallic Orange">Metallic Orange</option>
<option value ="Metallic Yellow">Metallic Yellow</option>
<option value ="Metallic Gold">Metallic Gold</option>
<option value ="Metallic Lime">Metallic Lime</option>
<option value ="Metallic Topaz">Metallic Topaz</option>
<option value ="Metallic Mint">Metallic Mint</option>
<option value ="Metallic Green">Metallic Green</option>
<option value ="Metallic Hunter">Metallic Hunter</option>
<option value ="Metallic Aqua">Metallic Aqua</option>
<option value ="Metallic Sky">Metallic Sky</option>
<option value ="Metallic Blue">Metallic Blue</option>
<option value ="Metallic Midnight">Metallic Midnight</option>
<option value ="Metallic Lavender">Metallic Lavender</option>
<option value ="Metallic Purple">Metallic Purple</option>
<option value ="Metallic Violet">Metallic Violet</option>
<option value ="Metallic Light Pink">Metallic Light Pink</option>
<option value ="Metallic Pink">Metallic Pink</option>
<option value ="Metallic Fuscia">Metallic Fuscia</option>
<option value ="Metallic Gunmetal">Metallic Gunmetal</option>
</select><br />
</form><br />
<br />
<br />
<br />
<br />

<button type="button" onclick="randomize()">Randomize!</button>

<script type="text/javascript">
function swapImage()
{    
    var lamptype=document.getElementById("lamptype");
    var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value;
    if(lamptype_value=='Lava Lamp')
    {
        document.getElementById('lamptype_pic').src='http://i34.photobucket.com/albums/d106/localgods/GREY.gif';
    }    
    else if(lamptype_value=='Glitter Lamp')
    {
        document.getElementById('lamptype_pic').src='http://i34.photobucket.com/albums/d106/localgods/glittersilver.gif';
    }
    
    var fillcolor=document.getElementById("fillcolor");
    var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value;
    if(lamptype_value=='lava' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='http://i34.photobucket.com/albums/d106/localgods/WHITE.gif';
    }
    else if(lamptype_value=='glitter' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='http://i34.photobucket.com/albums/d106/localgods/glitterwhite.gif';
    }
    else if(fillcolor_value=='red')
    {
        document.getElementById('fillcolor_pic').src='red.jpg';
    }
}
</script>



<p>&nbsp;</p>
</body>
</html>

This post has been edited by Loren: May 18 2012, 10:40 PM

[Loren]

Both are incorrect actually. I recall you got this working earlier in the thread (with the alertboxes)? Anyway here's one way to do it with examples of two SELECT menus):

*snip*

Note how you need a separate IMG element for each SELECT menu.

Ok, I AM already adding in the image elements...or should have been. I had one image mapped out, at least, but it wasn't being replaced. I did get this to work with alertboxes, but I couldn't get the imageswap thing to replace "alert". And I swear I really have been studying up as much as I can, but I'm dense sometimes. I have to use both trial and error AND research to really learn anything, it seems. I will go back now that I have a bit more understanding, and see if I can take what works from that, and fix what's broken in this (or at least my application/iteration of it).

Yes. Here's one way to map OPTION values to image URLs:

CODE

function swapImage()
{    
    var lamptype=document.getElementById("lamptype");
    var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value;
    if(lamptype_value=='lava')
    {
        document.getElementById('lamptype_pic').src='lavalamp.jpg';
    }    
    else if(lamptype_value=='glitter')
    {
        document.getElementById('lamptype_pic').src='glitterlamp.jpg';
    }
    
    var fillcolor=document.getElementById("fillcolor");
    var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value;
    if(lamptype_value=='lava' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='lavawhite.jpg';
    }
    else if(lamptype_value=='glitter' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='glitterwhite.jpg';
    }
    else if(fillcolor_value=='red')
    {
        document.getElementById('fillcolor_pic').src='red.jpg';
    }
}

Note that in the second code block (for the fillcolor SELECT menu), the white fillcolor image will be different depending on what you selected in the lamptype menu, but the red fillcolor image will be the same regardless of lamptype. EDIT: I made a few mistakes at first, hope it's correct now.

(If the javascript syntax in the above examples don't make sense, maybe should study basic function syntax, IF/ELSE statements and comparison operators.)

No, all of that DID make perfect sense to me. Variables and value/conditional branches are something I actually have some experience with. All you need for those to work is to declare a variable, designate a value for that variable, then read that value and respond to it. You need something to change the variable, and something to react to those changes. At least the mechanics of that are gelled in my mind, but I need to brush up on the punctuation and grammar. Oh, and I just realized that you edited...the code looks the same, but I'll have a better look!

Didn't quite follow that. The basic idea is still to use one IMG element for each SELECT menu, right?

I was just trying to say that I was trying to get the image to display properly for each select menu before I moved on to anything else, but was unable to do that. I'm now fairly convinced that that was a problem with those 2 weird variables that were used in that code sample. This is another reason why trial-and-error doesn't always work, but I still say it's a convoluted yet effective method sometimes.

You mean an OPTION value? You can only use one value, but there are other ways. The best in this case should be to only use the value to identify the selected OPTION, and then map that to different things depending on context, like in my previous example where I determine image file depending on the combination of both lamp type and color (at least if the color is white).

Yes, and that makes sense to me! I was sure that I could get it to work this time...

In general it's better to study than using trial and error, otherwise you may end up with things that seem to work but are actually quite buggy.

I should probably have said that I had been doing both. I have to read, but it almost never makes sense to me at first. But I have to have it there, if only for subconscious reference. I wish my brain worked a little differently sometimes...

This post has been edited by Loren: May 19 2012, 08:24 AM

[Loren]

Ok, here is the "alert" script that worked before:

CODE

<script type="text/javascript">
function displayResult()
{
var lamptype=document.getElementById("lamptype");
alert(lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

var fillcolor=document.getElementById("fillcolor");
alert(fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value);

var liquidcolor=document.getElementById("liquidcolor");
alert(liquidcolor.getElementsByTagName("option")[liquidcolor.selectedIndex].value);

var basecolor=document.getElementById("basecolor");
alert(basecolor.getElementsByTagName("option")[basecolor.selectedIndex].value);
}
</script>

And here is the one that worked, but only for the first select menu:

CODE

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("lamptype");
    image.src = dropd.value;    

var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("fillcolor");
    image.src = dropd.value;    

var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("liquidcolor");
    image.src = dropd.value;    

var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("basecolor");
    image.src = dropd.value;    
};
</script>

Again, it looks to me at the outset that the problem (other than what you mentioned about not needing to declare that variable more than once), is the variable "dropd". That was in an example online that I modified, and I saw no way to change it and its references without breaking the script. I'm still working, and I've started reading some faq's from start to finish, rather than hi-lighting specific sections. Sometimes info overload is a bad thing, but I'm trying to temper it with raw experience.

[EDIT] EUREKA! ...more to come...

False alarm. The only way this code works is if I edit out all but the first iteration of that code block...the one referencing the "lamptype" select menu. Even after I edited it this way:

CODE

<script type="text/javascript">
function swapImage()
{
var lamptype=document.getElementById("lamptype");
alert(lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value);

var fillcolor=document.getElementById("fillcolor");
alert(fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value);

var liquidcolor=document.getElementById("liquidcolor");
alert(liquidcolor.getElementsByTagName("option")[liquidcolor.selectedIndex].value);

var basecolor=document.getElementById("basecolor");
alert(basecolor.getElementsByTagName("option")[basecolor.selectedIndex].value);
}
</script>

[EDIT] And even when that worked for the first select menu, it was because there were URL's in the option values.

This post has been edited by Loren: May 19 2012, 09:54 AM

[Christian J]

If I take out the "onchange swapImage" from the select menus, and put it into the code which comes after like you showed me

What was that?

Should I start trying to put this back together without the image elements for now, or should I be building them in as I go?

You need one IMG element for each SELECT, so I suggest you create those at the same time.

But you only need a couple of OPTION elements (with corresponding image files) for each SELECT menu to test with. The rest of the OPTIONs can be added later.

[Christian J]

In your example, what does "('lamptype_pic')" mean? I think this is a fundamental step I'm missing.

It's just an arbitrary ID value that seemed practical to me. You can use anything that makes sense to you as long as it's valid ID syntax.

Where does "('lamptype_pic')" fit into this? Is this a default image that gets swapped out with different URL's? If so, then I have to say that I don't understand how this part works still.

"lamptype_pic" is the ID of the IMG element that corresponds with the "lamptype" SELECT menu. Again you can call them something else if you want.

Here's my new code.

Seems correct, except:

CODE

<div class="img">
</a></div>

<br />
<br />
<br />

The above doesn't belong in the HEAD section (or anywhere else really).

CODE

<img id="imageToSwap" src="http://i34.photobucket.com/albums/d106/localgods/empty.gif" />

Same thing with the above IMG element. You need a separate IMG element for each SELECT menu, then each such IMG needs an ID that corresponds with the script (like "lamptype_pic", "fillcolor_pic" etc). The script itself needs more code blocks for the "liquidcolor" and "basecolor" menus.

You also need to be consistent with the values: now you use both lamptype_value=='Lava Lamp' and lamptype_value=='lava', as well as lamptype_value=='Glitter Lamp' and lamptype_value=='glitter'.

[Loren]

Now we're cooking with gas:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lamp Builder</title>

<style type="text/css">
body
{
background-color:hsl(220,05%,15%);
}
#container {position: absolute;}
#container img {
position: absolute;
top: 20;
left: 250;
}

#lamptype {z-index: 1;}
#fillcolor {z-index: 2;}
#liquidcolor {z-index: 3;}
#basecolor {z-index: 4;}
left:000px;
top:000px;
z-index:1;
}
</style>

<br />
<br />
<br />
</head>

<body>

<img id="imageToSwap" src="http://i34.photobucket.com/albums/d106/localgods/empty.gif" />

<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder">
<select id="lamptype" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="Lava Lamp">Lava Lamp</option>
<option value ="Glitter Lamp">Glitter Lamp</option>
</select><br />
<br />

<font color="white">Choose a Wax/Glitter Color</font><br />
<select id="fillcolor" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="White">White</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Mint Green">Mint Green</option>
<option value ="Fluor. Green">Fluor. Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Fluor. Blue">Fluor. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
<option value ="Black">Black</option>
<option value ="Brown">Brown</option>
</select><br />
<br />

<font color="white">Choose a Liquid Color</font><br />
<select id="liquidcolor" onchange="swapImage()">
<option value ="-CHOOSE ONE-">-Select One-</option>
<option value ="Clear">Clear</option>
<option value ="Red">Red</option>
<option value ="Amber">Amber</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Teal">Teal</option>
<option value ="Lt. Blue">Lt. Blue</option>
<option value ="Dk. Blue">Dk. Blue</option>
<option value ="Purple">Purple</option>
<option value ="Lavender">Lavender</option>
<option value ="Violet">Violet</option>
<option value ="Lt. Pink">Lt. Pink</option>
<option value ="Dk. Pink">Dk. Pink</option>
</select><br />
<br />

<font color="white">Choose a Base/Cap Color</font><br />
<select id="basecolor" onchange="swapImage()">
<option value ="-Select One-">-Select One-</option>
<option value ="Crimson">Crimson</option>
<option value ="Strawberry">Strawberry</option>
<option value ="Red">Red</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Topaz">Topaz</option>
<option value ="Lime Green">Lime Green</option>
<option value ="Mint Green">Mint Green</option>
<option value ="Green">Green</option>
<option value ="Hunter Green">Hunter Green</option>
<option value ="Aqua">Aqua</option>
<option value ="Sky Blue">Sky Blue</option>
<option value ="Blue">Blue</option>
<option value ="Midnight">Midnight</option>
<option value ="Lavender">Lavender</option>
<option value ="Purple">Purple</option>
<option value ="Violet">Violet</option>
<option value ="Light Pink">Light Pink</option>
<option value ="Dark Pink">Dark Pink</option>
<option value ="Fuscia">Fuscia</option>
<option value ="Black">Black</option>
<option value ="White">White</option>
<option value ="Grey">Grey</option>
<option value ="Metallic Silver">Metallic Silver</option>
<option value ="Metallic Red">Metallic Red</option>
<option value ="Metallic Orange">Metallic Orange</option>
<option value ="Metallic Yellow">Metallic Yellow</option>
<option value ="Metallic Gold">Metallic Gold</option>
<option value ="Metallic Lime">Metallic Lime</option>
<option value ="Metallic Topaz">Metallic Topaz</option>
<option value ="Metallic Mint">Metallic Mint</option>
<option value ="Metallic Green">Metallic Green</option>
<option value ="Metallic Hunter">Metallic Hunter</option>
<option value ="Metallic Aqua">Metallic Aqua</option>
<option value ="Metallic Sky">Metallic Sky</option>
<option value ="Metallic Blue">Metallic Blue</option>
<option value ="Metallic Midnight">Metallic Midnight</option>
<option value ="Metallic Lavender">Metallic Lavender</option>
<option value ="Metallic Purple">Metallic Purple</option>
<option value ="Metallic Violet">Metallic Violet</option>
<option value ="Metallic Light Pink">Metallic Light Pink</option>
<option value ="Metallic Pink">Metallic Pink</option>
<option value ="Metallic Fuscia">Metallic Fuscia</option>
<option value ="Metallic Gunmetal">Metallic Gunmetal</option>
</select><br />
</form><br />
<br />
<br />
<br />
<br />

<button type="button" onclick="randomize()">Randomize!</button>

<script type="text/javascript">
function swapImage()
{    
    var lamptype=document.getElementById("lamptype");
    var lamptype_value=lamptype.getElementsByTagName("option")[lamptype.selectedIndex].value;
    if(lamptype_value=='Lava Lamp')
    {
        document.getElementById('lamptype_pic').src='http://i34.photobucket.com/albums/d106/localgods/GREY.gif';
    }    
    else if(lamptype_value=='Glitter Lamp')
    {
        document.getElementById('lamptype_pic').src='http://i34.photobucket.com/albums/d106/localgods/glittersilver.gif';
    }
    
    var fillcolor=document.getElementById("fillcolor");
    var fillcolor_value=fillcolor.getElementsByTagName("option")[fillcolor.selectedIndex].value;
    if(lamptype_value=='Lava Lamp' && fillcolor_value=='White')
    {
        document.getElementById('fillcolor_pic').src='http://i34.photobucket.com/albums/d106/localgods/WHITE.gif';
    }
    else if(lamptype_value=='Glitter Lamp' && fillcolor_value=='white')
    {
        document.getElementById('fillcolor_pic').src='http://i34.photobucket.com/albums/d106/localgods/glitterwhite.gif';
    }
    else if(fillcolor_value=='Red')
    {
        document.getElementById('fillcolor_pic').src='red.jpg';
    }
}
</script>


<p>&nbsp;</p>
</body>
</html>

...Only it still isn't working. I think I'm getting close though...?

[EDIT] Oh, and I have that "image to swap" in there, because that is the default, empty lamp that you see when you first open the page. I could have other images layered on top of it, but I thought it might be better to swap them.

It's also displaying the image here, instead of 250 pixels out like it's supposed to. I've tried switching to "relative" positioning, but I couldn't fix that issue. I've fixed it before with line breaks, but not this time.


I'll bet this:

CODE

<img id="imageToSwap" src="http://i34.photobucket.com/albums/d106/localgods/empty.gif" />

...needs to go into this:

CODE

}
#container {position: absolute;}
#container img {
position: absolute;
top: 20;
left: 250;
}

...somehow...?

This post has been edited by Loren: May 19 2012, 01:01 PM

[Loren]

Ok, it's NOT that.

Sorry, I dinged out there (imagine).

And those image id's are like a different kind of variable, maybe...? I've seen some other instances of that in my readings.

Oh, and this is something for another point, but I think I've decided that I want to designate which set of fill I want to display, based on which lamp type is selected. And by that I mean:

CODE

//Rewrites the text and values
options[0]=new Option("Select a page","none");
options[1]=new Option("Red");
options[2]=new Option("Orange");
options[3]=new Option("Yellow");
options[0].selected=true

It will give a totally different set of options for a glitter lamp than for a lava lamp. Again, I want to try and work that in later, rather than now, when I can't even seem to get the images to swap. I still haven't decided if I should try and use that, though. One advantage of doing it the way it is now, is that people can switch back and forth between white wax and white glitter (or whichever color) to compare them, and I don't think that would work the other way. Switching from "Lava Lamp" to "Glitter Lamp" would reset the whole thing.

The dis-advantage to doing it the way it is now is...now that I'm trying to reproduce these lamps irl, I have to make sure that I can add a "disable" to options when they become unavailable due to restocking issues. I won't be able to do that the way it is now. I would be disabling the color "White" for both kinds of lamps, even when the white wax for the lava lamps was still available.

This post has been edited by Loren: May 19 2012, 02:42 PM

[Loren]

I think I may have found a way to disable certain options and leave things the way they are...I hope.

It seems like I can put the disable code in the if then branches, can't I? That way if you choose a glitter lamp, and only silver glitter is available right then, all of the other options could be greyed out.

I'll have to wait until I can get the images to swap to experiment with this, but I think the idea is sound. I hope so, because A) I would hate for you to have worked on that for me, only to toss it, and B) I really like the way it works now.