Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing image via drop down select 1

Status
Not open for further replies.

Tanag

Programmer
Oct 5, 2005
18
CA
I have a form on my page where a user enters data and then they need to select an image they want.

Since I have over 300 images that need to be displayed I wanted to put the image names in a drop down box, however I would like it so that when a user selects an image in the drop down box a preview is shown beside it. If they choose a different image from the list that new image is shown where the old one was.

How can this be done? It seems like it should be very simple.
I've tried googling and all I can find are tutorials on how to make dynamic drop down menus.

Thanks!
 
Just use the onchange event handler of the <select> box to change the src attribute of your <img> tag. You just need to make sure that you keep the directory structure of where the images are located straight. This example assumes that the images are stored in a folder named images that is a subfolder of where the .html file resides:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function changeImage(newImage) {
   document.getElementById("theImage").src = newImage;
}

</script>
<style type="text/css"></style>
</head>
<body>
<select id="imageSelector" [!]onchange="changeImage(this.value)"[/!]>
   <option value="./images/img1.jpg">img1</option>
   <option value="./images/img2.jpg">img2</option>
   <option value="./images/img3.jpg">img3</option>
</select>
<img id="theImage" src="./images/img1.jpg" alt="some text about blah1" />
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top