select box change picture to selected items..HOW?

Fred12

04-11-2011, 10:48 AM

hi,
ich möchte in einer Option select box mit mehreren optionen
wenn ich eine Option auswähle, dass sich das dazugehörige bild dazu ändert,
also beispiel:

<tr><td>Neigung des Solarpanels</td>
<td><form name="test"><select name="Solarpanel" size="1">
<option name="0">0</option>
<option name="1" >5</option>
<option name="2">10</option>
<option name="3">15</option>
<option name="4">20</option>
<option name="5">25</option>
<option name="6">30</option>
<option name="7">35</option>
<option name="8">40</option>
<option name="9">45</option>
<option name="10">50</option>
<option name="11">55</option>
<option name="12">60</option>
<option name="13">70</option>
<option name="14">80</option>
<option name="15">90</option>
</select></form>
</td>
<td>Grad</td>
<td><img src="http://www.XXXX.html" TITLE="Solarpanels" />
</td>
<tr>

also wenn ich neigung solarpanel 60° anwähle soll sich das bild zu 60° SOlarpanel ändern... ich hab zu jeder option dazu ein eigenes Bild...
wie kann ich machen dass sich die Bilder alle auf der GLEICHEN Position auf der Webseite ändert? also bild 1 wird dann durch bild 2 ersetzt bei optionsauswahl usw...

IN ENGLISH:
I want to change a picture when I choose an item in a select box ...
this picture has to be on the same place as previous picture..so if I choose option 1 -> picture 1 ; option 2 -> picture 2 but the picture has to remain on same spot like the picture before , ok?
example given is the one on top... it can be done in HTML / JAVA / Jquery or whatever....
hope u can help me, thx!

effpeetee

04-11-2011, 11:23 AM

Anything like this here. (http://www.exitfegs.co.uk/ninea.html)

Frank

coothead

04-11-2011, 11:46 AM

Hi there Fred12,

and a warm welcome to these forums. ;)

Here is a basic example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>untitled document</title>

<style type="text/css"></style>

<script type="text/javascript">

function init(){
var pics=[
'a.jpg','b.jpg','c.jpg','c.jpg',
'd.jpg','e.jpg','f.jpg','g.jpg',
'h.jpg','i.jpg','j.jpg','k.jpg',
'l.jpg','m.jpg','n.jpg','o.jpg'
];
var obj=document.getElementById('sps');

document.forms[0][0].onchange=function() {
if(this.value!='') {
obj.src=pics[this.value];
obj.alt=pics[this.value].split('.')[0]; /* this is optional and may be removed */
obj.title=pics[this.value].split('.')[0]; /* this is optional and may be removed */
}
}
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<form action="#">
<div>
<select>
<option value="">options</option>
<option value="0">0</option>
<option value="1">5</option>
<option value="2">10</option>
<option value="3">15</option>
<option value="4">20</option>
<option value="5">25</option>
<option value="6">30</option>
<option value="7">35</option>
<option value="8">40</option>
<option value="9">45</option>
<option value="10">50</option>
<option value="11">55</option>
<option value="12">60</option>
<option value="13">70</option>
<option value="14">80</option>
<option value="15">90</option>
</select>
</div>
</form>

<div>
<img id="sps" src="a.jpg" alt="a" title="a">
</div>

</body>
</html>

coothead

Fred12

04-11-2011, 12:09 PM

thanks,

now I have some questions as I'm not so good in coding...

'a.jpg','b.jpg'
do I enter the web address of the pictures for "a" , "b" and so on?

obj=document.getElementById('sps');

whats the ID('sps') ? sps?

obj.src=pics[this.value];
what do I enter for "this.value"?

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
[/code
what does these mean? where can I read a description of those items? ( I really want to learn about this)

[code]
<img id="sps" src="a.jpg" alt="a" title="a">

ID of the picture is "sps", ok but its only for a.jpg do I have to change the picture source every time or how does it go?

thx for answer...