www.webdeveloper.com
Results 1 to 4 of 4

Thread: dropdown that displays image and url when selected

  1. #1
    Join Date
    Nov 2010
    Posts
    2

    dropdown that displays image and url when selected

    Hi all,

    I am creating a page with a dropdown menu that has 140 countries in the list. When someone clicks on say, Algeria, an image of Algeria comes up below the dropdown with a URL below that. I got the code to accomplish that much. What I need further help on is how to make the URLs a hyperlink (all different) as well as making the image clickable so that a larger version pops up when clicked on. I'm ok with starting from scratch if there is a better way to accomplish this than what I've got.

    Code so far:

    Code:
    <script type="text/javascript">
    function show(sel) {
    if (sel.value != "") {
    var pair = sel.value.split("$");
    document.getElementById("picture").src = pair[0];
    document.getElementById("caption").innerHTML = "http://" + pair[1];
    }
    }
    </script>
    
    
    <form action="post">
    <select name="select" onchange="show(this);">
    <option value = "">Select Country</option>
    <option value="Algeria.png$www.url.com/algeria">Algeria</option>
    <option value="Angola.png$www.url.com/angola">Angola</option>
      </select>
    <img id="picture" src="" alt="" /> 
    <span id="caption"></span>
    TIA~

    Denise

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Talking

    I don't know what's better ... there's always someone who code better than me.
    The best is what works and is understandable to the coder and user.
    What you currently have seems to meet both those criteria.

    My only suggestion would be to move the values of the select box to a text (read with ajax functions) or external JS file. The select box and options could be dynamically created.

    Why? ... because:
    If in a text file, then it would be easier to add and/or make changes/corrections.
    If an error is created when modifications are made directly to the script or external JS file, the program may stop completely,
    but if the error is one entry of a text file, then only one display is effected and the program should continue to run.

    But if you edit carefully every time you make changes, then I see no difference between techniques.

    Just my $0.02 worth.
    Good Luck!

  3. #3
    Join Date
    Nov 2010
    Posts
    2
    Hi JMRKER -

    Thanks for taking the time to reply but I'm not really sure what to do with this info. I need help with my code, making the images and URLs clickable.

    Denise

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb Something to consider ...

    Consider these changes:

    You did not provide the correct URLs to see if the images worked, so I provided some of my own goofy ones.
    Make the appropriate changes to display your images.

    Click anywhere in the 'blocked' area to simulate going to a specific URL. Right now I just show an alert message.

    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>
    I created an 'imgList' array that you could put into an external JS file,
    leave where it is after expansion
    or convert to a text file and read with some ajax functions from your server.

    Post back about any portions you don't understand.

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles