Image selector

This example uses the select input to create a pulldown menu of imaages.

by Michael Borck

HTML

<select id="selectCity" onchange="updateCity()">
    <option>Melbourne</option>
    <option selected>Perth</option>
    <option>Sydney</option>
</select>

<div id="city">
</div>

CSS

.attribution {
    font-size: .7em;
    color: steelblue;
    padding:0;
    margin:0;
}

JavaScript

// Attributes images of notable Australian cities
var cities = [ 
    {
        city: "Melbourne",
        url: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Melbourne_Skyline_and_Princes_Bridge_-_Dec_2008.jpg/640px-Melbourne_Skyline_and_Princes_Bridge_-_Dec_2008.jpg",
        description: "A HDR tone mapped image of the Melbourne skyline and Princes Bridge as viewed from Southbank. Taken by myself with a Canon 5D and 24-105mm f/4L IS lens.",
        date: "28th of December, 2007",
        author: "David Iliff",
        license: "CC-BY-SA 3.0",
        wikimedia: "http://commons.wikimedia.org/wiki/File:Melbourne_Skyline_and_Princes_Bridge_-_Dec_2008.jpg"
    },
    
    {
        city: "Perth",
        url:"http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Perth_CBD_from_Mill_Point_%282%29.jpg/800px-Perth_CBD_from_Mill_Point_%282%29.jpg",
        description:"Perth CBD from Mill Point, Perth, Western Australia",
        date: "21 March 2012, 07:58:56",
        author: "J Harrison ([email protected])",
        license: "Creative Commons Attribution-Share Alike 3.0 Unported license"
    },
    
    {
        city: "Sydney",
        url: "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/640px-Sydney_Opera_House_-_Dec_2008.jpg",
        description: "A exposure blended photo of the Sydney Opera House, as viewed from the Sydney Harbour Bridge. Taken by myself with a Canon 5D and 100mm f/2.8 macro lens.",
        date: "2 December 2008",
        author: "David Iliff",
        license: "CC-BY-SA 3.0",
        wikimedia: "http://commons.wikimedia.org/wiki/File:Sydney_Opera_House_-_Dec_2008.jpg"
    }
 ];

// Update the image and details for the city that is currently selected
function updateCity() {
    var theCity = document.getElementById("selectCity").value;
    var index   = document.getElementById("selectCity").selectedIndex;
    alert (theCity + " has been selected at index " + index);
    if...