The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

3 Pages V  1 2 3 >  
Reply to this topicStart new topic
> Mutually Exclusive Options?
Loren
post May 12 2012, 09:16 AM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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!

This post has been edited by Loren: May 12 2012, 09:32 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 12 2012, 09:48 AM
Post #2


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 12 2012, 09:56 AM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 12 2012, 06:54 PM
Post #4


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2012, 12:42 PM
Post #5


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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





--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 14 2012, 10:19 AM
Post #6


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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?


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 14 2012, 12:32 PM
Post #7


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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

This post has been edited by Loren: May 14 2012, 12:34 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2012, 01:52 PM
Post #8


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 14 2012, 02:38 PM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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!

This post has been edited by Loren: May 14 2012, 02:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2012, 04:09 PM
Post #10


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 14 2012, 08:15 PM
Post #11


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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

This post has been edited by Loren: May 14 2012, 08:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 15 2012, 01:45 AM
Post #12


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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!

This post has been edited by Loren: May 15 2012, 01:46 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 15 2012, 08:24 AM
Post #13


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 15 2012, 09:10 AM
Post #14


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 15 2012, 10:14 PM
Post #15


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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?

This post has been edited by Loren: May 15 2012, 11:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 16 2012, 12:56 AM
Post #16


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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?

This post has been edited by Loren: May 16 2012, 12:57 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2012, 12:19 PM
Post #17


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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();">


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2012, 12:20 PM
Post #18


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2012, 12:35 PM
Post #19


.
********

Group: WDG Moderators
Posts: 6,245
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Loren
post May 16 2012, 05:56 PM
Post #20


Novice
**

Group: Members
Posts: 25
Joined: 12-May 12
Member No.: 17,101



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.

This post has been edited by Loren: May 16 2012, 06:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

3 Pages V  1 2 3 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th November 2014 - 02:37 AM