Monday, March 11, 2013

Load Images on HTML Select Options


Load images inside Tiles folder on select options.

HTML Markup:


<select>
  <option value="Tile1">Tile1</option>
  <option value="Tile2">Tile2</option>
  <option value="Tile3">Tile3</option>
</select>
 <img id="scream" src="Tiles/Tile1.jpg" alt="The Scream" width="220" height="277"/>

Jquery Script:
 <script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript">

$(document).ready(function () {
     $("select").change(function () {
        var newSrc = "Tiles/" + $(this).val() + ".jpg";
        $("#scream").attr('src', newSrc);
     });
}); </script>

No comments:
Write comments
Recommended Posts × +