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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how do you change the image upon changing the options in select drop down box?

    all i have to do is the image to change automatically based on the option you selected from the drop down list.
    here is the code, any help is appreciable. thanks in advance.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    img{
    height:95px;
    width:95px;
    display:block;
    margin-top:10px;
    }
    #caption{
    font-family:Verdana,tahoma,arial;
    font-size:8pt;
    text-align:left;
    display:block;
    width:250px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
    var caption=['Default Image Caption',
    'begonia',
    'daffodils',
    'mixture',
    'natural',
    'purple',
    'red flower',
    'sunflower',
    'tulip',
    'two flowers'], // This will be your images caption
    bp='..\images', //base url of your images
    imgnum=9, //Number of your images. This should match on your comboboxes options.
    thumb=document.getElementById('thumb'), //id of your image that will be changing
    description=document.getElementById('caption'), //id of your caption
    combobox=document.getElementById('selection'); // id of your combobox.

    combobox.onchange=function()
    {
    thumb.src=bp+'Picture'+this.value+'.jpg';
    description.innerHTML=caption[this.value];
    }
    }
    </script>
    </head>
    <body>
    <label>Please Change the picture: </label>
    <select id="selection">
    <option>Change Picture</option>
    <option value="1">begonia</option>
    <option value="2">daffodils</option>
    <option value="3">mixture</option>
    <option value="4">natural</option>
    <option value="5">purple</option>
    <option value="6">red flower</option>
    <option value="7">sunflower</option>
    <option value="8">tulip</option>
    <option value="9">two flowers</option>
    </select>
    <br>
    <img src="..\images" alt="mypic" id="thumb">
    <span id="caption">Caption for the default Image</span>
    </body>
    </html>
    thanks again

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Consider this...

    Slightly different from your code, but you should be able to easily modify with your images.
    Code:
    <html>
    <head>
    <title>Selectable Images</title>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/forumdisplay.php?s=&daysprune=&f=3
    
    var imgList = [
      "Select Country$http://www.worldatlas.com/webimage/world/polit/politbd.gif$#",
    
    // valid images and correct URLs need to be given here
    // "Algeria$Algeria.png$www.url.com/algeria",
    // "Angola$Angola.png$www.url.com/angola"
    
    // substitute other countries, pictures, captions and links below
      "Exhaused$http://www.nova.edu/hpd/otm/pics/4fun/11.jpg$http://www.google.com",
      "Confused$http://www.nova.edu/hpd/otm/pics/4fun/12.jpg$http://www.yahoo.com",
      "Ecstatic$http://www.nova.edu/hpd/otm/pics/4fun/13.jpg$http;//www.bing.com",
      "Guilty$http://www.nova.edu/hpd/otm/pics/4fun/14.jpg$http://www.webdeveloper.com",
      "Suspicious$http://www.nova.edu/hpd/otm/pics/4fun/15.jpg$http://www.codingforums.com"	// NOTE: no comma after last entry
    ];
    
    function Populate(IDS,Items){
      var tmp = [];
      var sel = document.getElementById(IDS);   // alert(IDS+':'+sel.id);
      sel.options.length=0;
      for (var zxc0=0;zxc0<Items.length;zxc0++){
        if (Items[zxc0]){
          tmp = Items[zxc0].split('$');	// could use rest of 'tmp' differently below
          sel.options[sel.options.length]=new Option(tmp[0],tmp[0],true,true);
        }
      }
      sel.selectedIndex=0;
    }
    
    function show(sel) {
      if (sel < 0) { sel = 0; }
      var pair = imgList[sel].split("$");
      document.getElementById("Picture").src =pair[1];
      document.getElementById("Caption").innerHTML = pair[0];
    }
    
    function GoToURL() { 
      var ndx = document.getElementById('Country').selectedIndex;
      if (ndx <= 0) { return; }
      var pair = imgList[ndx].split("$");
      alert('Go To: '+pair[2]);		// for testing purposes
    //  document.location.href = pair[2];	// un-comment this after testing
    }
    
    onload = function () {
      show(0);
    }
    </script>
    
    <body>
    <form action="" onsubmit="return false">
    <select id="Country" name="Country" onchange="show(this.selectedIndex)">
     <script type="text/javascript">Populate('Country',imgList)</script>
    </select>
    <br>
    <div onclick="GoToURL()" style="width:200px; text-align:center; border:5px solid orange">
     <img id="Picture" src="" alt="Picture" height="124" width="200" /> 
     <br><span id="Caption">Caption of Picture</span>
    </div>
    </form>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to add value to the options

    im using this code and it works perfectly for switching the images, however if i wanted to assign value's to the option dropdown, how would i accomplish that?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    jmrker, it would have been better - more readable, less error-prone, and more efficient - if you use array of objects instead of array of $-delimited strings.
    Code:
    var imgList = [
      {
          caption: 'Exhausted',
          src: 'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
          url: 'http://www.google.com'
       },
       {
          caption: 'Confused',
          src: 'http://www.nova.edu/hpd/otm/pics/4fun/12.jpg',
          url: 'http://www.yahoo.com'
       },
       //and so on...
    ]
    And to access each object in the array, you just have to do:
    Code:
    imgList[index].caption
    imgList[index].src
    imgList[index].url
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    You can put all the data for the options into a 2D array and then generate content dynamically.

    Each row in the optionsData array contains the option text, the image caption and the image file name. You don't need values for each option since you only need to know the index of the selected option.

    If you want to wrap the images in a link, just add an <a> around the <img>, add each option's image url at the end of each row in optionsData and then change the href value of the <a> according to the passed indx in swapPic().

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #imgContainer {display: none;}
            </style>
            <script type="text/javascript">
                var optionsData = [
                    ['begonia','picture of begonia','num1.jpg'],
                    ['daffodils','picture of daffodils','num2.jpg'],
                    ['mixture','picture of mixture','num3.jpg'],
                    ['natural','picture of natural','num4.jpg'],
                    ['purple','picture of purple','num5.jpg'],
                    ['red flower','picture of red flower','num6.jpg'],
                    ['sunflower','picture of sunflower','num7.jpg'],
                    ['tulip','picture of tulip','num8.jpg'],
                    ['two flowers','picture of two flowers','num9.jpg']
                ];
                function swapPic(indx){
                    if(indx == 0){return;}
                    imgContainerO.style.display = 'block';
                    imgSwapO.src = optionsData[indx-1][2];
                    imgCaptionO.innerHTML = optionsData[indx-1][1];
                }
                window.onload=function(){
                    imgContainerO = document.getElementById('imgContainer');
                    imgSwapO = document.getElementById('imgSwap');
                    imgCaptionO = document.getElementById('imgCaption');
                    var sel1O = document.getElementById('sel1');
                    sel1O.onchange=function(){swapPic(this.selectedIndex);}
                    for(i=0; i < optionsData.length; i++){
                        sel1O.options[sel1O.options.length]=new Option(optionsData[i][0],'',false,false);
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <select id="sel1">
                    <option>Choose a picture</option>
                </select>
            </div>
            <div id="imgContainer">
                <img id="imgSwap" src="" alt="" />
                <span id="imgCaption"></span>
            </div>
        </body>
    </html>
    Last edited by bullant; 06-03-2011 at 03:14 AM.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    something like this if you need links around the images as well.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #imgContainer {display: none;}
            </style>
            <script type="text/javascript">
                var optionsData = [
                    ['begonia','picture of begonia','num1.jpg','url_begonia'],
                    ['daffodils','picture of daffodils','num2.jpg','url_daffodils'],
                    ['mixture','picture of mixture','num3.jpg','url_mixture'],
                    ['natural','picture of natural','num4.jpg','url_natural'],
                    ['purple','picture of purple','num5.jpg','url_purple'],
                    ['red flower','picture of red flower','num6.jpg','url_redflower'],
                    ['sunflower','picture of sunflower','num7.jpg','url_sunflower'],
                    ['tulip','picture of tulip','num8.jpg','url_tulip'],
                    ['two flowers','picture of two flowers','num9.jpg','url_twoflowers']
                ];
                function swapPic(indx){
                    if(indx == 0){return;}
                    imgContainerO.style.display = 'block';
                    imgSwapO.src = optionsData[indx-1][2];
                    imgLnkO.href = optionsData[indx-1][3];
                    imgCaptionO.innerHTML = optionsData[indx-1][1];
                }
                window.onload=function(){
                    imgContainerO = document.getElementById('imgContainer');
                    imgSwapO = document.getElementById('imgSwap');
                    imgCaptionO = document.getElementById('imgCaption');
                    imgLnkO = document.getElementById('imgLnk');
                    var sel1O = document.getElementById('sel1');
                    sel1O.onchange=function(){swapPic(this.selectedIndex);}
                    for(i=0; i < optionsData.length; i++){
                        sel1O.options[sel1O.options.length]=new Option(optionsData[i][0],'',false,false);
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <select id="sel1">
                    <option>Choose a picture</option>
                </select>
            </div>
            <div id="imgContainer">
                <a id="imgLnk">
                    <img id="imgSwap" src="" alt="" />
                </a>
                <span id="imgCaption"></span>
            </div>
        </body>
    </html>

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by glenngv View Post
    jmrker, it would have been better - more readable, less error-prone, and more efficient - if you use array of objects instead of array of $-delimited strings.
    Yes, you are correct, but you are also reviewing a post over 6 months old now.
    Created in my young and stupid days of javascript solutions.

  • #8
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok first of all I have to start off by saying you guys are freaking awesome!! Thank you for the quick responses!!

    This is what im doing:
    Shopping cart in php
    I'm trying to use a <select> feature that dynamically populates available color options that also changes the main image as you roll through them on the page. so when i submit the form, i want it to send the selection made back through the same page and add to the cart_array.
    my code is this:

    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/fo...daysprune=&f=3

    var imgList = [
    "Select Color$http://www.mysite.com/inventory_images/<?php echo $_GET['id'] ?>.jpg$#",

    // valid images and correct URLs need to be given here
    // "Algeria$Algeria.png$www.url.com/algeria",
    // "Angola$Angola.png$www.url.com/angola"

    // substitute other countries, pictures, captions and links below
    <?php
    foreach (explode(",",$co) as $color) {
    echo '"'.$color.'$http://www.mysite.com/images/'.$_GET['id'].'/'.$color.'.jpg",';
    }
    ?>
    // NOTE: no comma after last entry
    ];

    function Populate(IDS,Items){
    var tmp = [];
    var sel = document.getElementById(IDS); // alert(IDS+':'+sel.id);
    sel.options.length=0;
    for (var zxc0=0;zxc0<Items.length;zxc0++){
    if (Items[zxc0]){
    tmp = Items[zxc0].split('$'); // could use rest of 'tmp' differently below
    sel.options[sel.options.length]=new Option(tmp[0],tmp[0],true,true);
    }
    }
    sel.selectedIndex=0;
    }

    function show(sel) {
    if (sel < 0) { sel = 0; }
    var pair = imgList[sel].split("$");
    document.getElementById("productImage").src =pair[1];
    document.getElementById("Caption").innerHTML = pair[0];
    }

    function GoToURL() {
    var ndx = document.getElementById('colors').selectedIndex;
    if (ndx <= 0) { return; }
    var pair = imgList[ndx].split("$");
    alert('Go To: '+pair[2]); // for testing purposes
    // document.location.href = pair[2]; // un-comment this after testing
    }

    onload = function () {
    show(0);
    }
    </script>


    <select id="colors" name="colors" onChange="show(this.selectedIndex)">
    <script type="text/javascript">Populate('colors',imgList)</script>
    </select></td>


    the way it was working before, (i'll use size instead to show it work)
    <select name="size" title="Size">
    <?php foreach (explode(",",$so) as $size) {
    echo '<option value ="'.$size.'">'.$size.'</option>';} ?>
    </select>


    I know its mixed php and javascript any help is greatly appreciated!!

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
     
    var sameUser = (symply == shashikala)? true : false;

  • #10
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope always been symply always will be. so false..

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Huh???...

    Quote Originally Posted by symply View Post
    Nope always been symply always will be. so false..
    What does that mean?

    What are you trying to ask?


  • #12
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    What does that mean?

    What are you trying to ask?

    Sorry for the confusion.
    here is my code:
    Code:
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/fo...daysprune=&f=3
    
    var imgList = [
    "Select Color$http://www.mysite.com/inventory_images/<?php echo $_GET['id'] ?>.jpg$#",
    
    // valid images and correct URLs need to be given here
    // "Algeria$Algeria.png$www.url.com/algeria",
    // "Angola$Angola.png$www.url.com/angola"
    
    // substitute other countries, pictures, captions and links below
    <?php 
    foreach (explode(",",$co) as $color) {
    echo '"'.$color.'$http://www.mysite.com/images/'.$_GET['id'].'/'.$color.'.jpg",';
    }
    ?>
    // NOTE: no comma after last entry
    ];
    
    function Populate(IDS,Items){
    var tmp = [];
    var sel = document.getElementById(IDS); // alert(IDS+':'+sel.id);
    sel.options.length=0;
    for (var zxc0=0;zxc0<Items.length;zxc0++){
    if (Items[zxc0]){
    tmp = Items[zxc0].split('$'); // could use rest of 'tmp' differently below
    sel.options[sel.options.length]=new Option(tmp[0],tmp[0],true,true);
    }
    }
    sel.selectedIndex=0;
    }
    
    function show(sel) {
    if (sel < 0) { sel = 0; }
    var pair = imgList[sel].split("$");
    document.getElementById("productImage").src =pair[1];
    document.getElementById("Caption").innerHTML = pair[0];
    }
    
    function GoToURL() { 
    var ndx = document.getElementById('colors').selectedIndex;
    if (ndx <= 0) { return; }
    var pair = imgList[ndx].split("$");
    alert('Go To: '+pair[2]); // for testing purposes
    // document.location.href = pair[2]; // un-comment this after testing
    }
    
    onload = function () {
    show(0);
    }
    </script>
    
    <form id="form1" name="form1" method="post" action="http://www.mysite.com/store/cart.php">
    
    <select id="colors" name="colors" onChange="show(this.selectedIndex)">
    <script type="text/javascript">Populate('colors',imgList)</script>
    </select></td>
    
    <select name="size" title="Size">
    // this is how i had the colors come through before the image rotator
    <?php foreach (explode(",",$so) as $size) {
    echo '<option value ="'.$size.'">'.$size.'</option>';} ?>
    </select>
    </form>
    Its working to the point where it is automatically grabbing the data from mysql db and populating the <select> options list... and its also changing the image as the original script intended to,

    however the problem is when i submit the form to my shopping cart, its not bringing the value through.. so im thinking that i need to assign a <option value=$color>'.$color.'</option>


  •  

    Posting Permissions

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