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!

Register Log in
  • 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

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!
 
Sort by date Sort by votes
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]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
299
nanbread
nanbread
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
356
malpa
malpa
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
196
berkshirea
berkshirea
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
314
TheLazyPig
TheLazyPig
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
243
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top