Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    select box change picture to selected items..HOW?

    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:
    Code:
    <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!
    Last edited by Fred12; 04-11-2011 at 12:12 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Anything like this here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Fred12,

    and a warm welcome to these forums.

    Here is a basic example...
    Code:
    
    <!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

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks,

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

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

    Code:
    obj=document.getElementById('sps');
    whats the ID('sps') ? sps?

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

    [code]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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •