CODEWITHSUNDEEP
javascripthtmlhtml-select
user610064
user610064

Reputation: 481

How to add an image flyout to a html select drop down list

How do you add a small image flyout to a html select drop down list? The idea would be that when you are going up or down the list item by item (hovering?) the flyout changes (maybe 75 pix square) to the left or right of the drop down list. This would not be an an image list.

EDIT 1 Here is my sample source code:

HTML

  <Select id="products" onchange="if (this.selectedIndex) showImg();" style="width:200px">
    <option value="1" selected>prod1</option>    
    <option value="2">prod2</option>
  </Select>

Javascript

function showImg()
{
/*alert("You have selected some of the text!");*/
/*TODO: flyout image based on option/Id"
}

Upvotes: 1

Views: 3125

Answers (1)

davidbuzatto
davidbuzatto

Reputation: 9424

You can try this (using jQuery):

HTML:

    <table>
    <tr>
        <td>
            <select id="mySelect">
                <option value="" img="">Select an Item!</option>
                <option value="1" img="http://www.dummyimage.com/100x50/3a52f2/fff.png">Item 1</option>
                <option value="2" img="http://www.dummyimage.com/100x50/00ff00/fff.png">Item 2</option>
                <option value="3" img="http://www.dummyimage.com/100x50/00cc99/fff.png">Item 3</option>
                <option value="4" img="http://www.dummyimage.com/100x50/FF5200/fff.png">Item 4</option>
            </select>
        </td>
        <td>
            <img id="myImage" src=""></img>                
        </td>
    </tr>
</table>

JavaScript:

$(function(){
    // when the select changes...
    $( "#mySelect" ).change(function(event) {

        // gets the img attribute (custom attribute) of the selected option
        var image = $(this).find( ":selected" ).attr( "img" );

        // configure the src attribute of the img tag to use the value of the select option img attribute
        $( "#myImage" ).attr( "src", image );
    });
});

JsFiddle: http://jsfiddle.net/davidbuzatto/UzyQj/

Upvotes: 1

Related Questions