Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Mutually Exclusive Options?

Posted by: Loren May 12 2012, 09:16 AM

Hi! My name is Loren, and this is my first post. smile.gif

I just started seriously trying to code in HTML/JavaScript, and I've been trying to create an interface where an online user can create their own custom virtual aquarium. This is done with 4 pulldown option menus, where users can choose things like the type of aquarium, the color of the water, the color of the gravel, and the color of the aquarium frame. Eventually, I want to have an image display for each option, and transparent gif files super-imposed for things like the different color aquarium frames so that people can see the aquarium they're making as they design it. I'm attempting to do this via a java script that tracks 4 variables (one for each customizable field), and displays images accordingly.

Right now, however, the images are represented by a numeric display of each variable amount...just as a placeholder and indicator.

I thought about showing an image directly upon selection of an option, but I need to use these variables other places anyway, so I figured I might as well trigger the image displays with them. There will be a LOT of options...so many that, the number of possible combinations will be 10,000-12,000...so I have to overlap the images. I can't render all of those images separately and reference them. blink.gif

but my problem is, all of the scripts for each option are running automatically, from the first line to the last! If you load my code up and look at it, the 4 variable amounts should all be "000" until you select an option, and then the variable should change accordingly. However, the numbers are as high as they can be, which means the code just ran through each option until it got to the end. Is there a way to put a stop to this behavior? I need for only the option that you select to run its script.

Here is my 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>Build Your Own Aquarium</title>
</head><br />

Choose an Aquarium Type<br />
<select>
<option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript">
var aquariumtype;
aquariumtype="000";
</script></option>
<option value ="Freshwater Aquarium">Freshwater Aquarium<script type="text/javascript">
var aquariumtype;
aquariumtype="001";
</script></option>
<option value ="Saltwater Aquarium">Saltwater Aquarium<script type="text/javascript">
var aquariumtype;
aquariumtype="002";
</script></option>
</select><br />
<br />

Choose a Gravel Color<br />
<select>
<option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript">
var fillcolor;
fillcolor="000";
</script></option>
<option value ="White">White<script type="text/javascript">
var fillcolor;
fillcolor="001";
</script></option>
<option value ="Strawberry">Strawberry<script type="text/javascript">
var fillcolor;
fillcolor="002";
</script></option>
<option value ="Red">Red<script type="text/javascript">
var fillcolor;
fillcolor="003";
</script></option>
<option value ="Amber">Amber<script type="text/javascript">
var fillcolor;
fillcolor="004";
</script></option>
<option value ="Orange">Orange<script type="text/javascript">
var fillcolor;
fillcolor="005";
</script></option>
<option value ="Yellow">Yellow<script type="text/javascript">
var fillcolor;
fillcolor="006";
</script></option>
<option value ="Lime Green">Lime Green<script type="text/javascript">
var fillcolor;
fillcolor="007";
</script></option>
<option value ="Green">Green<script type="text/javascript">
var fillcolor;
fillcolor="008";
</script></option>
<option value ="Mint Green">Mint Green<script type="text/javascript">
var fillcolor;
fillcolor="009";
</script></option>
<option value ="Fluor. Green">Fluor. Green<script type="text/javascript">
var fillcolor;
fillcolor="010";
</script></option>
<option value ="Aqua">Aqua<script type="text/javascript">
var fillcolor;
fillcolor="011";
</script></option>
<option value ="Teal">Teal<script type="text/javascript">
var fillcolor;
fillcolor="012";
</script></option>
<option value ="Lt. Blue">Lt. Blue<script type="text/javascript">
var fillcolor;
fillcolor="013";
</script></option>
<option value ="Dk. Blue">Dk. Blue<script type="text/javascript">
var fillcolor;
fillcolor="014";
</script></option>
<option value ="Fluor. Blue">Fluor. Blue<script type="text/javascript">
var fillcolor;
fillcolor="015";
</script></option>
<option value ="Purple">Purple<script type="text/javascript">
var fillcolor;
fillcolor="016";
</script></option>
<option value ="Lavender">Lavender<script type="text/javascript">
var fillcolor;
fillcolor="017";
</script></option>
<option value ="Violet">Violet<script type="text/javascript">
var fillcolor;
fillcolor="018";
</script></option>
<option value ="Lt. Pink">Lt. Pink<script type="text/javascript">
var fillcolor;
fillcolor="019";
</script></option>
<option value ="Dk. Pink">Dk. Pink<script type="text/javascript">
var fillcolor;
fillcolor="020";
</script></option>
<option value ="Black">Black<script type="text/javascript">
var fillcolor;
fillcolor="021";
</script></option>
<option value ="Brown">Brown<script type="text/javascript">
var fillcolor;
fillcolor="022";
</script></option>
</select><br />
<br />

Choose a Water Color<br />
<select>
<option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript">
var liquidcolor;
liquidcolor="000";
</script></option>
<option value ="Clear">Clear<script type="text/javascript">
var liquidcolor;
liquidcolor="001";
</script></option>
<option value ="Red">Red<script type="text/javascript">
var liquidcolor;
liquidcolor="002";
</script></option>
<option value ="Amber">Amber<script type="text/javascript">
var liquidcolor;
liquidcolor="003";
</script></option>
<option value ="Orange">Orange<script type="text/javascript">
var liquidcolor;
liquidcolor="004";
</script></option>
<option value ="Yellow">Yellow<script type="text/javascript">
var liquidcolor;
liquidcolor="005";
</script></option>
<option value ="Green">Green<script type="text/javascript">
var liquidcolor;
liquidcolor="006";
</script></option>
<option value ="Aqua">Aqua<script type="text/javascript">
var liquidcolor;
liquidcolor="007";
</script></option>
<option value ="Teal">Teal<script type="text/javascript">
var liquidcolor;
liquidcolor="008";
</script></option>
<option value ="Lt. Blue">Lt. Blue<script type="text/javascript">
var liquidcolor;
liquidcolor="009";
</script></option>
<option value ="Dk. Blue">Dk. Blue<script type="text/javascript">
var liquidcolor;
liquidcolor="010";
</script></option>
<option value ="Purple">Purple<script type="text/javascript">
var liquidcolor;
liquidcolor="011";
</script></option>
<option value ="Lavender">Lavender<script type="text/javascript">
var liquidcolor;
liquidcolor="012";
</script></option>
<option value ="Violet">Violet<script type="text/javascript">
var liquidcolor;
liquidcolor="013";
</script></option>
<option value ="Lt. Pink">Lt. Pink<script type="text/javascript">
var liquidcolor;
liquidcolor="014";
</script></option>
<option value ="Dk. Pink">Dk. Pink<script type="text/javascript">
var liquidcolor;
liquidcolor="015";
</script></option>
</select><br />
<br />

Choose a Base/Frame Color<br />
<select>
<option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript">
var basecolor;
basecolor="000";
</script></option>
<option value ="Red">Red<script type="text/javascript">
var basecolor;
basecolor="001";
</script></option>
<option value ="Orange">Orange<script type="text/javascript">
var basecolor;
basecolor="002";
</script></option>
<option value ="Yellow">Yellow<script type="text/javascript">
var basecolor;
basecolor="003";
</script></option>
<option value ="Green">Green<script type="text/javascript">
var basecolor;
basecolor="004";
</script></option>
</select><br />
<br />

<input type="submit" /><br />
<br />

<script type="text/javascript">
document.write(lamptype);
document.write("<br />");
</script>

<script type="text/javascript">
document.write(fillcolor);
document.write("<br />");
</script>

<script type="text/javascript">
document.write(liquidcolor);
document.write("<br />");
</script>

<script type="text/javascript">
document.write(basecolor);
document.write("<br />");
</script>

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

Any and all help would be most appreciated!

Posted by: Christian J May 12 2012, 09:48 AM

You can't put SCRIPT elements inside OPTION elements. Here's one way to let OPTION elements interact with java script: http://www.javascriptkit.com/javatutors/combos1.shtml

Posted by: Loren May 12 2012, 09:56 AM

Thanks for that!

Sorry I'm so noobish. sad.gif

I'm still surprised that I was able to accomplish as much as I did in 2 days. Too bad it was fundamentally flawed. lol

Posted by: Loren May 12 2012, 06:54 PM

I'm sorry to double-post, but I have a further issue.

I have changed the first selection list to a form, in this format:

CODE
<form name="aquariumtype">
<p><select name="choice" size="1">
<option>-Select One-</option>
<option>Freshwater</option>
<option>Saltwater</option>
</select></p>
</form>


Now I have to use this: "document.aquariumtype.choice" to access each possible selection. I'd need to do this with a series of IF/THEN/ELSE branches for each option, am I correct? So for that example, "If document.aquariumtype.choice.value=0", then set var "aquariumtype" to "0""?

Could someone please help me with the codes for changing the variable in each instance?

Posted by: Christian J May 13 2012, 12:42 PM

If you're using several SELECT menus you should put them all inside the same form. I also recommend values for each OPTION element, so you can choose something suitable for the script, while still having human-readable content in the OPTION element. And if you want each OPTION value to correspond with a GIF image, you can use the image URL in the OPTION value:

CODE
<form name="aquarium">
<select name="watertype" size="1">
<option value="none">-Select One-</option>
<option value="freshwater.gif">Freshwater</option>
<option value="saltwater.gif">Saltwater</option>
</select>

<select name="gravelcolor" size="1">
<option value="none">-Select One-</option>
<option value="red.gif">Red</option>
<option value="blue.gif">Blue</option>
</select>
</form>


QUOTE(Loren @ May 13 2012, 01:54 AM) *

I'd need to do this with a series of IF/THEN/ELSE branches for each option, am I correct? So for that example, "If document.aquariumtype.choice.value=0", then set var "aquariumtype" to "0""?

No, if I understood this correctly you can retrieve each menu value directly, as long as one is chosen. Something like:

CODE
var water_type=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value;

Combined with the form above (and some more JS), the variable "water_type" now might have the value "freshwater.gif".

You can use IF/ELSE to see if the user has chosen another OPTION value than the default "-Select One-", though (or simply remove that OPTION value altogether --after all gravel always has some kind of color).




Posted by: Loren May 14 2012, 10:19 AM

QUOTE(Christian J @ May 13 2012, 12:42 PM) *

If you're using several SELECT menus you should put them all inside the same form. I also recommend values for each OPTION element, so you can choose something suitable for the script, while still having human-readable content in the OPTION element. And if you want each OPTION value to correspond with a GIF image, you can use the image URL in the OPTION value:

CODE
<form name="aquarium">
<select name="watertype" size="1">
<option value="none">-Select One-</option>
<option value="freshwater.gif">Freshwater</option>
<option value="saltwater.gif">Saltwater</option>
</select>

<select name="gravelcolor" size="1">
<option value="none">-Select One-</option>
<option value="red.gif">Red</option>
<option value="blue.gif">Blue</option>
</select>
</form>


QUOTE(Christian J @ May 13 2012, 12:42 PM) *
No, if I understood this correctly you can retrieve each menu value directly, as long as one is chosen. Something like:

CODE
var water_type=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value;

Combined with the form above (and some more JS), the variable "water_type" now might have the value "freshwater.gif".

You can use IF/ELSE to see if the user has chosen another OPTION value than the default "-Select One-", though (or simply remove that OPTION value altogether --after all gravel always has some kind of color).


Oh yeah! I'd forgotten that variables didn't have to carry a numeric value! Var "watercolor" can = "Orange"! smile.gif Now I won't have to assign a numeric value for each variable, which will be advantageous on several levels, as you mentioned! And the default "-Select One-" setting will need to be there for the default (grey) images which will display until a specific color is selected. If "-Select One-" is the value of the corresponding variable, it also determines the outcome from other option sets, such as water color. For instance, if you chose a water color before you had selected a gravel color, the image would display the default grey gravel in one of the available water colors. I will probably have to set some of these var values at the beginning, since having them be "000" by default won't really work. But Wow! I won't even need variables for the frame/lid part! Not for the display aspect, anyway...I'll still need them for other things.

I should probably explain what I'm trying to do a little better.

I have images made of every possible combination of liquid/gravel...330 in total. Those will be accessed from 22 folders, one for each gravel color. In each folder will be a series of images for that color gravel in all of the possible water colors. I'm doing it this way because overlaying a transparency that is already a transparent gif seems a bit dodgy using HTML or even JavaScript. Am I misguided about that? If so, then that would be fantastic. Not only would I not have to render all of those possible combinations and code them in, but I wouldn't need to use variables at all to render any of the images! In any case, I then want to display a transparent gif over that whole thing. I have 40 images made, one for each color of frame/lid, that will be laid over the contents of the tank. Since those are all transparent gif files, that should be a simple matter of hosting those images, linking them, and displaying them upon selection, hopefully. Is there a way to make sure that a particular image is always displayed on TOP?

And ok, that makes sense about the form tags. Thanks!

And I think I'm beginning to understand how this part will work:
CODE
var water_type=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value;


But for right now, I think I'm going to focus on displaying these images directly upon user selection. I'm so glad that I can do that! I'll worry about setting var. values after that.

Oh! And if I add values for each OPTION element, as per your suggestion, could I just use those as var. values, and not have to set them?



Posted by: Loren May 14 2012, 12:32 PM

I'm sorry to double-post, but I didn't quite make the cutoff time for edits.

I've been reading 2 different guides...one in PDF format about JavaScript, and http://www.w3.org/TR/html4/interact/forms.html on forms.

I've reformatted all 4 option lists and included values for each option, but I'm still having trouble doing anything with the data that's produced, including displaying it. sad.gif

I'm not giving up though...

Posted by: Christian J May 14 2012, 01:52 PM

QUOTE(Loren @ May 14 2012, 05:19 PM) *

overlaying a transparency that is already a transparent gif seems a bit dodgy using HTML or even JavaScript. Am I misguided about that?

Dodgy in what way? You might also use CSS opacity to merge a blue background with the gravel image.

QUOTE
Is there a way to make sure that a particular image is always displayed on TOP?

You can use the CSS z-index value (of absolutely positioned images) for that.

QUOTE
Oh! And if I add values for each OPTION element, as per your suggestion, could I just use those as var. values, and not have to set them?

Not sure I understood, but a major use of variables is to store e.g. a value until you want to use it, but you can also specify an image directly from the OPTION value like this:

CODE
document.getElementById('pic').src=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value;

(assuming there's an IMG element with the ID "pic").

Posted by: Loren May 14 2012, 02:38 PM

Oh! Well then it looks like CSS is the answer for me! If it can do that, then it will save me a lot of work making, organizing, and accessing all of those 330 images! I can just have 1 image per selection, and layer the results like I originally intended! That will be 40 images for the frame/lid, 22 for the gravel, and 15 for the water.

And I had a minor breakthrough...sort of. Here's my code at this point:

CODE
<html>
<head>
</head>
<body>

Choose an Aquarium Type<br />
<form name="aquariumbuilder">
<select id="aquariumtype" size="1">
<option value ="-CHOOSE ONE-">-CHOOSE ONE-</option>
<option value ="Freshwater Aquarium">Freshwater Aquarium</option>
<option value ="Saltwater Aquarium">Saltwater Aquarium</option>
</select><br />
<br />

Choose a Gravel Color<br />
<select id="gravelcolor" size="1">
<option value ="-CHOOSE ONE-">-CHOOSE 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 />

Choose a Water Color<br />
<select id="watercolor" size="1">
<option value ="-CHOOSE ONE-">-CHOOSE 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 />

Choose a Frame/Lid Color<br />
<select id="framecolor" size="1">
<option value ="-CHOOSE ONE-">-CHOOSE ONE-</option>
<option value ="Red">Red</option>
<option value ="Orange">Orange</option>
<option value ="Yellow">Yellow</option>
<option value ="Green">Green</option>
</select><br />
<br /></form>

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

<button type="button" onclick="displayResult()">Display Selection</button>

</body>
</html>


That code works, but I'd rather have an auto text display, rather than an alert window like that. Also, if you change the "aquariumtype" to "gravelcolor" or "watercolor", the alert box is off by 3. I have no idea why.

I hate to keep apologizing for being such a noob, but I'm still a noob. sad.gif I swear, I'm trying really hard though, and I will learn this! ...Eventually!

Posted by: Christian J May 14 2012, 04:09 PM

QUOTE(Loren @ May 14 2012, 09:38 PM) *

Oh! Well then it looks like CSS is the answer for me!

In any case you need CSS to position all the images in front of each other. You can also use CSS properties in javascript with the STYLE object.

QUOTE
Also, if you change the "aquariumtype" to "gravelcolor" or "watercolor", the alert box is off by 3. I have no idea why.

CODE

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

The above can only work as long as you're using a single SELECT menu, since document.getElementsByTagName("option") returns a collection of all OPTION elements on the page (regardless of SELECT menu). You might limit the collection of OPTION elements to only those in the "aquariumtype" SELECT menu, like this:

CODE
var aquariumtype=document.getElementById("aquariumtype");
alert(aquariumtype.options[aquariumtype.selectedIndex].value);

or this:

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


QUOTE
I'd rather have an auto text display, rather than an alert window like that.

What's an auto text display? You can add text into a specified HTML element with the innerHTML property.

QUOTE
I hate to keep apologizing for being such a noob, but I'm still a noob. sad.gif I swear, I'm trying really hard though, and I will learn this! ...Eventually!

You seem to be doing pretty good actually.

Posted by: Loren May 14 2012, 08:15 PM

QUOTE(Christian J @ May 14 2012, 04:09 PM) *

In any case you need CSS to position all the images in front of each other. You can also use CSS properties in javascript with the STYLE object.

I can't wait to start getting into that, and with your help, it looks like that time is close!

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
The above can only work as long as you're using a single SELECT menu, since document.getElementsByTagName("option") returns a collection of all OPTION elements on the page (regardless of SELECT menu). You might limit the collection of OPTION elements to only those in the "aquariumtype" SELECT menu, like this:

CODE
var aquariumtype=document.getElementById("aquariumtype");
alert(aquariumtype.options[aquariumtype.selectedIndex].value);

or this:

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

I used the second code, and it works great. smile.gif Here's what comes after the form now, after the edits:

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

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

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

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

<button type="button" onclick="displayResult()">Display Your Aquarium!</button>


Now, after you've made your selections, you can hit the button and see a series of alert messages that report your selections back to you. Eventually I want to display transparent gifs out to the right of the choice fields, in the blank area as seen here:

IPB Image

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
What's an auto text display? You can add text into a specified HTML element with the innerHTML property.

What I mean by auto text, is having the text (or preferably the gif image) display as soon as a user makes a selection. If I HAVE to use a button, then so be it...but I think there's a way to have the action take place "upon selection", rather than "upon button press". I'm not sure what the innerHTML property is, but I'm about to look it up. smile.gif

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
You seem to be doing pretty good actually.

Well that's very nice of you to say. tongue.gif And thank you so much again for all your help!

Oh, and I'm sorry if it seems like I'm going through this in a very convoluted way, but I want to learn it from the ground up so that I can change it as I need to, rather than being dependent upon verbatim quoting of code...you know? If I learn which part of the script is the "action" part, and I know the codes to render text or an image, I can change them back and forth at will. At least, that's the plan. tongue.gif

Posted by: Loren May 15 2012, 01:45 AM

Well I've had another minor breakthrough. I've found the CSS coding I need to render the images I need, where I need, in the size I need, and in the order that I need. smile.gif

Yay! Now I just need to figure out how to render the images upon selection of them. Do I do this within the individual options themselves, or do I use the variable values that I've already set up, via IF/THEN statements? I'll already need to be using those anyway, because some selection sets won't be available unless a variable has a certain value...they will be disabled. Here is the image display CSS I'm using, but my images are really horrible so the links are all nerfed. LOL! I was just going for default images for demonstration purposes, but these aren't really even passable as that for anybody but me.

CODE
<style type="text/css">
img
{
position:absolute;
left:250px;
top:-10px;
z-index:1;
}
</style>
<div class="img">
<img src="http://i34.photoshack.com/albums/d106/cocoapuff/ORANGE.gif"
width="176" height="520" /></a></div>


This isn't even the final project I'm working on. I chose this aquarium thing because it's also something cool that I've been wanting to do for a long time, but it's simpler than what I ultimately have planned...at least the images are.

...Or they were supposed to be. tongue.gif These images are NOT simple!

I'm getting frustrated though, so I need to take a break for the night. Nothing I seem to try is working!

Posted by: Christian J May 15 2012, 08:24 AM

QUOTE(Loren @ May 15 2012, 03:15 AM) *

What I mean by auto text, is having the text (or preferably the gif image) display as soon as a user makes a selection. If I HAVE to use a button, then so be it...but I think there's a way to have the action take place "upon selection", rather than "upon button press".

Sounds like you want onchange events (one in each SELECT menu) instead of the onclick event in the button.

QUOTE(Christian J @ May 14 2012, 04:09 PM) *

I want to learn it from the ground up so that I can change it as I need to, rather than being dependent upon verbatim quoting of code...you know?

That's exactly what we want people to do... smile.gif

Posted by: Christian J May 15 2012, 09:10 AM

QUOTE(Loren @ May 15 2012, 08:45 AM) *

Now I just need to figure out how to render the images upon selection of them. Do I do this within the individual options themselves

Yes, if you have one IMG element (with its own ID) for each aquarium property you can change that IMG's SRC as soon as you get the OPTION value. I posted an example of this earlier in the thread.

QUOTE
some selection sets won't be available unless a variable has a certain value...they will be disabled.

That might be a good use of IF/ELSE code forks. Or perhaps you could make some SELECT menus DISABLED by default, and only enable them when another menu has been changed.

QUOTE
CODE
<style type="text/css">
img
{
position:absolute;
left:250px;
top:-10px;
z-index:1;
}
</style>
<div class="img">
<img src="http://i34.photoshack.com/albums/d106/cocoapuff/ORANGE.gif"
width="176" height="520" /></a></div>

When using "position: absolute", keep in mind that its cordinates are relative the nearest positioned parent/ancestor element. This could be the viewport if nothing else is specified, so you may want to give the DIV container "position: relative". Also there's a loose </a> end tag above.

I'd suggest using multiple IMG elements (one for each category), each one with its unique ID and z-index value. Then you can just give them different SRC values in the script. If not all IMG elements are always used, you could make all of them invisible by default, and only make them visible once they're given a SRC value.

QUOTE
This isn't even the final project I'm working on.

If it's something more important, consider what should happen if javascript is not used (even though most human users do use JS), and wether the user should be able to save the resulting composite image (or its menu settings) somehow.

Posted by: Loren May 15 2012, 10:14 PM

Well, I've had two similar projects swimming through my head for a long time now. The first one is a "Build-An-Aquarium" interface, where people can make their own aquarium online. The other is a "Build-A-Motion-Lamp" interface, where people can design their own lava lamp or glitter lamp. I started with the aquarium because I thought the images would be MUCH easier to make. Turns out I was wrong. :-/ I'm having to try and make my own computer-rendered images for those, and I'm not really good with that. I'm not sure why I had such a block about the lamp images...I actually OWN one, so I can take pictures of it myself and use those. Last night I spent hours on the images...I think they look pretty good! So from now on, I'll just switch over to lamp mode, and later on when I get an aquarium that I can take pictures of, I can use what I've learned here to make that. This is the opposite of what I intended, but oh well.

I'm having a lot of trouble, but I'll start with this bit of code:

CODE
<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder">
<select id="lamptype" size="1">
<option value ="-CHOOSE ONE-"document.getElementById('pic 000').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>-Select One-</option>
<option value ="Lava Lamp"document.getElementById('pic 001').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>Lava Lamp</option>
<option value ="Glitter Lamp"document.getElementById('pic 002').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>Glitter Lamp</option>
</select><br />
<br />

I'm embarrassed to post that because I know it's wrong. sad.gif Am I supposed to upload all of the images into the source folder for the page, and then just title them "000.gif", etc.? I haven't actually uploaded it yet. I have uploaded some test images though, can I add those URL's? This also doesn't contain any of the image css code, or the "onchange" event.

QUOTE(Christian J @ May 15 2012, 08:24 AM) *

Sounds like you want onchange events (one in each SELECT menu) instead of the onclick event in the button.

I think these are supposed to be at the end of each of the 4 selection boxes, if I understand correctly, but every place I put the code seems inappropriate. They don't work there, anyway. tongue.gif

QUOTE(Christian J @ May 14 2012, 04:09 PM) *

That's exactly what we want people to do... smile.gif

I was raised by two college professors, and I can tell you that you are a good teacher because you adhere to that. smile.gif I'm pulling my hair out right now because I'm stuck again, but I'll get through it, with some help form some awesome people. And I'll retain it and appreciate it much more because they taught me that way...by helping me figure it out for myself.

So far I've been able to show that I can take what learn and go with it usually...but not this time. sad.gif I guess I'll go ahead and post all of my code on the page, as it is now:

CODE
<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>
</head><br />

<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder">
<select id="lamptype" size="1"onchange="IMG(http://i34.photobucket.com/albums/d106/localgods/empty.gif)">
<option value ="-CHOOSE ONE-"document.getElementById('pic 000').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>-Select One-</option>
<option value ="Lava Lamp"document.getElementById('pic 001').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>Lava Lamp</option>
<option value ="Glitter Lamp"document.getElementById('pic 002').src=document.lampbuilder.lamp type.options[document.lampbuilder.lamp type.selectedIndex].value;>Glitter Lamp</option>
</select><br />
<br />

<font color="white">Choose a Wax Color</font><br />
<select id="fillcolor" size="1">
<option value ="-CHOOSE 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" size="1">
<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" size="1">
<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 />
<br /></form>

<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>

<button type="button" onclick="displayResult()">Display Your Lamp!</button>

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

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

<body>

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

Those two images in there are displayed outside of any option set because I was experimenting with placement and layering. I know they work, now it's just a matter of getting those images to show on selection. I also saved the scripts at the end for the button and the report values, just in case I need to edit them for later use.

QUOTE(Christian J @ May 15 2012, 09:10 AM) *

Yes, if you have one IMG element (with its own ID) for each aquarium property you can change that IMG's SRC as soon as you get the OPTION value. I posted an example of this earlier in the thread.

I found it! I tried to work it into the options of the first choice set, but I'm still having such a hard time wrapping my head around what's happening...or supposed to be happening. If I understand, all I will need is an "onchange" activation event at the end of each selection box, with an "if var "lamptype" = "-Select One-", display [image URL] onchange" for each option? And what about the CSS info? I'm so confused...

Oooooooooh, wait...I think I just figured out something. The STYLE elements (CSS) that I added apply to all images on the page, am I right? Those can be at the top of the page and apply to all of it...correct? So I won't need to worry about including those, possibly. They are working in the example I'm going to post, so they should work for the other images, if I can figure out how to call them up by selecting them. I'm close, I think... I know you told me, but that doesn't mean I've grasped it quite yet. Obviously I can't just insert the code in, change it slightly for each instance, and have it work. I'm not understanding it well enough.

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
When using "position: absolute", keep in mind that its coordinates are relative the nearest positioned parent/ancestor element. This could be the viewport if nothing else is specified, so you may want to give the DIV container "position: relative". Also there's a loose </a> end tag above.

I'm actually enjoying the fact that all of the images move together as a group...that's proven very handy. I see your point, but in this case I made sure that the images all lined up pretty well. I can stretch the top image slightly if I need to. And thanks for the heads up on that loose tag...I'm not sure where that came from! Dreamweaver says it's related to the "text/css" style type, and doesn't show an error unless I delete it. Strange...

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
That might be a good use of IF/ELSE code forks. Or perhaps you could make some SELECT menus DISABLED by default, and only enable them when another menu has been changed.

Good idea! I once made 3-4 RPG's with various maker software packages, and I often had to switch several variable values invisibly at the very beginning of the game. It's all coming back to me...

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
I'd suggest using multiple IMG elements (one for each category), each one with its unique ID and z-index value. Then you can just give them different SRC values in the script. If not all IMG elements are always used, you could make all of them invisible by default, and only make them visible once they're given a SRC value.

Only thing about doing that, is the load time for 78 image elements, 77 of which won't be rendered. Am I misunderstanding you, maybe? Like I said, I do like the fact that all of the images are displayed right on top of each other, but if I won't be able to make the creator work like it's supposed to unless I have multiple img elements set, then I'll have to do that...no choice.

QUOTE(Christian J @ May 14 2012, 04:09 PM) *
If it's something more important, consider what should happen if javascript is not used (even though most human users do use JS), and wether the user should be able to save the resulting composite image (or its menu settings) somehow.

I DO want people to be able to save their creations as a JPG! I've intentionally been avoiding flash as much as possible because I didn't want to exclude people, but should I be avoiding JavaScript as well?

Posted by: Loren May 16 2012, 12:56 AM

I've been having horrible luck with comprehending code, so I decided to focus more on the images for a while. I think I now have more evidence that you were right about multiple image elements, Christian. Take a look at this:

CODE
<style type="text/css">
img
{
position:relative;
left:300px;
top:100px;
z-index:-1;
}
</style>
<div class="img">
<img src="http://i34.photobucket.com/albums/d106/localgods/WHITE.gif"
width="176" height="512" /></a></div>


<style type="text/css">
img
{
opacity:1.0;
filter:alpha(opacity=40)
position:relative;
left:300px;
top:100px;
z-index:0;
}
</style>
<div class="img">
<img src="http://i34.photobucket.com/albums/d106/localgods/ORANGE-1.gif"
width="176" height="512" /></a></div>

<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/ORANGE.gif"
width="176" height="515" /></a></div>

That works as it should, but the transparency on the liquid layer affects ALL images, not just that layer. I even set it to "relative", but it didn't matter. If I set ALL images to "relative", then I can't stack them. If I had those in separate elements, then that wouldn't happen, would it?

Posted by: Christian J May 16 2012, 12:19 PM

QUOTE(Loren @ May 16 2012, 05:14 AM) *

Well, I've had two similar projects swimming through my head for a long time now. The first one is a "Build-An-Aquarium" interface, where people can make their own aquarium online. The other is a "Build-A-Motion-Lamp" interface, where people can design their own lava lamp or glitter lamp.

Sounds very similar, programming-wise.

QUOTE
I'm not sure why I had such a block about the lamp images...I actually OWN one, so I can take pictures of it myself and use those.

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
Am I supposed to upload all of the images into the source folder for the page, and then just title them "000.gif", etc.?

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
I have uploaded some test images though, can I add those URL's?

To forum posts? Sure.

QUOTE
QUOTE
Sounds like you want onchange events (one in each SELECT menu) instead of the onclick event in the button.

I think these are supposed to be at the end of each of the 4 selection boxes, if I understand correctly,

No, in the start tags:

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

Posted by: Christian J May 16 2012, 12:20 PM

(...continued from last posts:)

QUOTE
I guess I'll go ahead and post all of my code on the page, as it is now:

You should use a Doctype for CSS to work properly. See the entry in the FAQ linked at the top of this page.

The first SELECT menu (with the ID "lamptype") is incorrect (javascript can't go inside OPTION elements).

STYLE elements must be in the HEAD section.

QUOTE
The STYLE elements (CSS) that I added apply to all images on the page, am I right?

Depends on the selector. See e.g. http://htmlhelp.com/reference/css/structure.html

QUOTE
And thanks for the heads up on that loose tag...I'm not sure where that came from! Dreamweaver says it's related to the "text/css" style type, and doesn't show an error unless I delete it. Strange...

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
QUOTE
I'd suggest using multiple IMG elements (one for each category), each one with its unique ID and z-index value. Then you can just give them different SRC values in the script. If not all IMG elements are always used, you could make all of them invisible by default, and only make them visible once they're given a SRC value.

Only thing about doing that, is the load time for 78 image elements, 77 of which won't be rendered. Am I misunderstanding you, maybe?

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
I DO want people to be able to save their creations as a JPG!

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.

QUOTE
I've intentionally been avoiding flash as much as possible because I didn't want to exclude people, but should I be avoiding JavaScript as well?

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").


Posted by: Christian J May 16 2012, 12:35 PM

QUOTE(Loren @ May 16 2012, 07:56 AM) *

I've been having horrible luck with comprehending code, so I decided to focus more on the images for a while. I think I now have more evidence that you were right about multiple image elements, Christian. Take a look at this:

CODE
<style type="text/css">
img
{
position:relative;
left:300px;
top:100px;
z-index:-1;
}
</style>
<div class="img">
<img src="http://i34.photobucket.com/albums/d106/localgods/WHITE.gif"
width="176" height="512" /></a></div>


Note the difference between an img element selector, and a .img class selector. My idea was to make the DIV "position: relative", each IMG element inside it "position: absolute", and then stack the latter in front of each other using z-index (also you don't need to repeat the STYLE block, one is enough for all elements --read more about this in the CSS reference). Something like this (in the HEAD section):

CODE

<style type="text/css">
#container {position: relative;}

#container img {
position: absolute;
top: 0;
left: 0;
}

#shape {z-index: 2;}
#color {z-index: 3;}
#pattern {z-index: 4;}
</style>

and this (in the BODY section):

CODE

<div id="container">
<img src="" alt="" id="shape">
<img src="" alt="" id="color">
<img src="" alt="" id="pattern">
</div>


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).

Posted by: Loren May 16 2012, 05:56 PM

QUOTE(Christian J @ May 16 2012, 12:35 PM) *

Note the difference between an img element selector, and a .img class selector. My idea was to make the DIV "position: relative", each IMG element inside it "position: absolute", and then stack the latter in front of each other using z-index (also you don't need to repeat the STYLE block, one is enough for all elements --read more about this in the CSS reference). Something like this (in the HEAD section):

CODE

<style type="text/css">
#container {position: relative;}

#container img {
position: absolute;
top: 0;
left: 0;
}

#shape {z-index: 2;}
#color {z-index: 3;}
#pattern {z-index: 4;}
</style>


and this (in the BODY section):

CODE

<div id="container">
<img src="" alt="" id="shape">
<img src="" alt="" id="color">
<img src="" alt="" id="pattern">
</div>


First of all let me say, I'm reading up about CSS rules and selectors.

In the meantime though, I've inserted this code into my page, replacing (shape, color, pattern) with (lamptype, fillcolor, liquidcolor, and basecolor [I added one tongue.gif]). So now I'm trying to figure out how to make these "alerts" into "display images". The way I was doing it was with CSS...but I'll look for a purely HTML equivalent, so that I can put it into an option branch. smile.gif

I'm beginning to see how this works now...I think.

And now I put the image id's and corresponding option values in the second part of that code? I thought I put the image url's into each option. If not, where do I put the URL's? Does it just look for a file with the same name as the option? *apologizes again* sad.gif.

OH WAIT... Ok, I've gone back and read this entire thread, and I've read a good chunk of the CSS faq.

This is the key to understanding it all, I think:
QUOTE(Christian J @ May 15 2012, 09:10 AM) *

QUOTE(Loren @ May 15 2012, 08:45 AM) *

Now I just need to figure out how to render the images upon selection of them. Do I do this within the individual options themselves?

Yes, if you have one IMG element (with its own ID) for each aquarium property you can change that IMG's SRC as soon as you get the OPTION value. I posted an example of this earlier in the thread.


And this:
QUOTE(Christian J @ May 13 2012, 12:42 PM) *

No, if I understood this correctly you can retrieve each menu value directly, as long as one is chosen. Something like:

CODE
var water_type=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value;

Combined with the form above (and some more JS), the variable "water_type" now might have the value "freshwater.gif".


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?

So...I'm telling option set 1 to display an image on spot X.
I'm also telling option set 2 to display an image on spot Y.
I'm telling option set 3 to display an image on spot Z.
I'm telling option set 4 to display an image on spot Q.

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.

If I put all of these images into a folder and upload it to the content folder of my page, instead of hosting them elsewhere, I think I'll make this a LOT easier for myself, because this isn't working. Sigh...I feel like such an imbecile.

CODE


<style type="text/css">
#container {position: relative;}

#container img {
position: absolute;
top: 0;
left: 0;
}

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

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

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

<style type="text/css">
#container {position: relative;}

#container img {
position: absolute;
top: 0;
left: 0;
}

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

<font color="white">Choose a Lamp Type</font><br />
<form name="lampbuilder">
<select id="lamptype" onchange="displayResult();"size="1">
<option value ="-CHOOSE 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 Color</font><br />
<select id="fillcolor" onchange="displayResult();"size="1">
<option value ="-CHOOSE ONE-" = http://i34.photobucket.com/albums/d106/localgods/glittersilver.gif>-Select One-</option>
<option value ="White" = 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 />


I'm still working on reading and responding to everything, but I wanted to go ahead and say all this first.

[EDIT] 1 - WAIT...before you respond to this...I've had a breakthrough.
[EDIT] 2 - Never Mind, false alarm. :-/ I thought that this:

CODE
<img src="" alt="" id="pattern">


Was for an option, but it was for an option set. Am I right? But I DID figure out that <img src= "" should be <img src= "source image.gif", and (alt = "") would be alt "Green Lava", or whatever.

Posted by: Loren May 16 2012, 07:31 PM

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. smile.gif 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. tongue.gif

[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:
IPB Image
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! smile.gif 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.

Posted by: Loren May 16 2012, 11:08 PM

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

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>


Posted by: Christian J May 17 2012, 02:16 PM

QUOTE(Loren @ May 17 2012, 12:56 AM) *

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).

QUOTE
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.

QUOTE
(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.

Posted by: Christian J May 17 2012, 02:18 PM

QUOTE(Loren @ May 17 2012, 02:31 AM) *

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.

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

QUOTE
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>


QUOTE
[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. wacko.gif

Posted by: Christian J May 17 2012, 02:22 PM

QUOTE(Loren @ May 17 2012, 06:08 AM) *

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

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

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

cool.gif

QUOTE
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.

QUOTE
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.

QUOTE
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.

QUOTE
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).

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

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

QUOTE
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...

Posted by: Loren May 17 2012, 08:48 PM

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. tongue.gif 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!

Posted by: Loren May 18 2012, 12:01 AM

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...

Posted by: Loren May 18 2012, 01:08 AM

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. sad.gif

Posted by: Christian J May 18 2012, 11:17 AM

QUOTE(Loren @ May 18 2012, 03:48 AM) *

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)? unsure.gif 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.

QUOTE
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. blush.gif

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

QUOTE
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? unsure.gif

Posted by: Christian J May 18 2012, 11:19 AM

QUOTE(Loren @ May 18 2012, 07:01 AM) *

If so, how do I reconcile this code:

*snip*

...With this one?

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

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

It's good to sleep sometimes also. mellow.gif

QUOTE

[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;

Posted by: Christian J May 18 2012, 11:32 AM

QUOTE(Loren @ May 18 2012, 08:08 AM) *

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).

QUOTE
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.

Posted by: Loren May 18 2012, 02:14 PM

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. smile.gif

[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?

Posted by: Loren May 18 2012, 10:06 PM

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. sad.gif

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. sad.gif

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>

Posted by: Loren May 19 2012, 08:21 AM

QUOTE
Both are incorrect actually. I recall you got this working earlier in the thread (with the alertboxes)? unsure.gif 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).

QUOTE
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. blush.gif

(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!

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

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. tongue.gif

QUOTE(Christian J @ May 18 2012, 11:32 AM) *

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... sad.gif

QUOTE
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. tongue.gif 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...

Posted by: Loren May 19 2012, 09:26 AM

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. sad.gif 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. sad.gif 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.

Posted by: Christian J May 19 2012, 10:35 AM

QUOTE(Loren @ May 18 2012, 09:14 PM) *

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?

QUOTE
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.

Posted by: Christian J May 19 2012, 11:01 AM

QUOTE(Loren @ May 19 2012, 05:06 AM) *

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.

QUOTE
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. sad.gif

"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.

QUOTE
Here's my new code.

Seems correct, except:

QUOTE

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

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

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

QUOTE
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'.

Posted by: Loren May 19 2012, 12:16 PM

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. sad.gif 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.
IPB Image

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...?

Posted by: Loren May 19 2012, 01:47 PM

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. sad.gif 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.

Posted by: Loren May 22 2012, 01:37 AM

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.

Posted by: Loren Jun 8 2012, 09:58 AM

Sorry I drove you away, Christian. sad.gif

And I'm sorry I'm no good with this, no matter how hard I try to be better with it.

I've read up on what I could find (about 80% of the links you gave me were broken), and do walkthroughs and assisted projects to try and learn...I can't figure this out.

But it's really not right to keep asking you to do it for me, basically. You already have.

But it's not working, and I can't figure out why. sad.gif

Posted by: Christian J Jun 9 2012, 12:38 PM

QUOTE(Loren @ Jun 8 2012, 04:58 PM) *

about 80% of the links you gave me were broken

Which links are broken?

QUOTE
it's not working, and I can't figure out why. sad.gif

If you're new to HTML, CSS and JS then learning it will take some time (I'd imagine at least several months).

First make a lamp by putting together the various changeable image slices. Use only HTML and CSS for that, no javascript. Do not use one large image for the default lamp, that will just complicate things. Once you got that covered you can begin with the script for changing the various image slices.

I've posted some general suggestions in the thread, but you can't expect things to work by putting code snippets together without understanding them.

Posted by: Loren Jun 11 2012, 07:24 PM

QUOTE(Christian J @ Jun 9 2012, 12:38 PM) *
Which links are broken?

Going back and reading the thread, I'm pretty sure it was in the "other faq's" sections on CSS and JavaScript, but I can't find them now. ALL of them are purple, indicating that I at least tried to read all of them. It's possible that a server or two was down that's back up now, or other issues.

QUOTE(Christian J @ Jun 9 2012, 12:38 PM) *
First make a lamp by putting together the various changeable image slices. Use only HTML and CSS for that, no javascript. Do not use one large image for the default lamp, that will just complicate things. Once you got that covered you can begin with the script for changing the various image slices.

I've posted some general suggestions in the thread, but you can't expect things to work by putting code snippets together without understanding them.

You did a great job giving me all of the parts. If I weren't such a moron, I could put them all together again, and I'm sure they would work perfectly.

But that's the thing...I'm totally an idiot when it comes to stuff like this. Things were looking okay for a while there, and I thought I might just be able to break through...at least enough to get what I needed out of it. But I was delusional. I can handle complicated ideas, as long as a foreign language isn't introduced. The only reason I could pull off huge, epic RPG's is because the code was all entered by pushing buttons for things like "increase internal variable" or "set global variable". It was dumbed down for morons like me. I created a fairly cool, unique myspace page by fooling around with HTML code, chopping it up, and moving it around until it worked. It was barbaric, but it worked, and I learned a lot about CSS, tags, etc. in the process.

What I did NOT learn was how unforgiving HTML can be, and how important it is to execute code as efficiently as possible. My page worked, and looked badass, so I thought I was badass.

But I was a pathetic tourist who (barely) successfully asked for a glass of water in French for the first time in broken pigeon French and was SO proud.

Okay that's a slight exaggeration...I knew I wasn't "good at HTML" because of that, but I thought it might increase my chances of being able to grasp it, to the degree that I needed to.

Up until a few days ago, I was a caregiver for someone with Parkinson's. To make a long story short, he was supposed to go into assisted care in 5 months. Instead, he decided at the last minute, totally unexpectedly, to go RIGHT NOW. So what was once a "kinda cool project idea" to work on has turned into a business opportunity. I found that I could actually order a small lot of those lamps, and I went for it. I'm actually doing this. I'm in a situation where I don't have much choice right now, though.

So I'm going to HAVE to pay someone to do this for me. I thought I could cobble it together with some help, but I'm proving pretty useless.

Out of desperation I tried one more time to build my own code. I actually got further than I was able to yet, because all 4 options will swap an image, and superimpose over other images. The only problem is that it resets the image to the default, empty globe image before it lays the transparent base image or globe color image over it...not the currently selected globe image. And I tried to do it without using any JavaScript, but I failed. sad.gif How can I swap the image without javascript?

Anyway, this was just WAY, WAY over my head for a first project with web coding.

So now, I guess...as a parting question...

How much do you think it will cost me to have someone make this for me? It just needs to be the lamp builder, and a link to complete the sale in paypal. All custom lamps will be the same price, unless a paypal discount code is used...but I think I should still have a shopping cart system. Sigh...even though I'll be providing all 100-some-odd images myself, that still sounds like a multi-thousand-dollar job. sad.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)