Flic wrote on 01 jun 2006 in comp.lang.javascript
:
<html>
<head><title>Colour combinations</title>
Please quote what you are replying to.
If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the
article headers. <http://www.safalra.com/special/googlegroupsreply/>
<script type="text/javascript">
function changeColour() {
var selection = (document.select.colour.selectedIndex);
This works only on IE, use id and getElementById()
var picture = ((document.select.colour.options[selection].value) +
".jpg");
Do not unse unnecessary ()s
var text = ((document.select.colour.options[selection].value) +
"Text");
document.colour.src = picture;
same
document.text.style.display = "";
}
[unused function ]
</script>
</head><body>
<table width=250 border=0 >
this table s not terminated with </table> so the HTML will not "work"
why mix css and ancient attributes?
<tr align=center><td>
<form name="select">
<select name="colour" onchange="changeColour()">
<option value="diamondJet">Black / Grey</option>
<option value="aquaCapri">Blue / Light Blue</option>
<option value="lightAmethyst">Purple / Light Purple</option>
<option value="fireSiam">Red / Orange</option>
<option value="roseGarnet">Dark Red / Pink</option>
</select>
</td></tr></form>
This form will never execute, so why a form?
your changeColour() will fire, but will not be effective, because:
<tr><td><img name="colour" src="diamondJet.jpg" alt="Photo"></td></tr>
<tr><td align=center>
<form name="diamondJetText" style="display:none"><b>Black:</b>
Jet<br><b>Grey:</b> Black Diamond</form>
probably you would mean to use <div> in stead of <form>?
<form name="aquaCapriText" style="display:none"><b>Dark Blue:</b> Capri
Blue<br><b>Light Blue:</b> Aquamarine</form>
same
<form name="lightAmethystText" style="display:none">purple</form>
same
<form name="fireSiamText" style="display:none">fire</form>
same
<form name="roseGarnetText" style="display:none">pink</form>
same
<td></tr>
[ unimportand part]
</body>
</html>
try this:
=================================
<html>
<head>
<script type="text/javascript">
function changeColour() {
var selColour = document.getElementById('selColour')
var selection = selColour.selectedIndex;
var text = selColour.options[selection].value + "Text";
alert(text)
document.getElementById('diamondJetText').style.di splay = "none";
document.getElementById('aquaCapriText').style.dis play = "none";
document.getElementById('lightAmethystText').style .display = "none";
document.getElementById('fireSiamText').style.disp lay = "none";
document.getElementById('roseGarnetText').style.di splay = "none";
document.getElementById(text).style.display = "";
var picture = selColour.options[selection].value + ".jpg";
document.getElementById('picColour').src = picture;
alert(picture)
}
</script>
</head><body>
<select id="selColour" onchange="changeColour()">
<option >--- choose ---</option>
<option value="diamondJet">Black / Grey</option>
<option value="aquaCapri">Blue / Light Blue</option>
<option value="lightAmethyst">Purple / Light Purple</option>
<option value="fireSiam">Red / Orange</option>
<option value="roseGarnet">Dark Red / Pink</option>
</select>
<br><br>
<img id="picColour" src="diamondJet.jpg" alt="Photo">
<br><br>
<div id="diamondJetText" style="display:none"><b>Black:</b>
Jet<br><b>Grey:</b> Black Diamond</div>
<div id="aquaCapriText" style="display:none"><b>Dark Blue:</b> Capri
Blue<br><b>Light Blue:</b> Aquamarine</div>
<div id="lightAmethystText" style="display:none">purple</div>
<div id="fireSiamText" style="display:none">fire</div>
<div id="roseGarnetText" style="display:none">pink</div>
</body>
</html>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)