Slide show showing pictures combo
Written by 21 August 2012
if you want the user choose the picture from a combo box and then click on a button and show the picture changing picture in JavaScript
Code Snippet:
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!-- Drop Down Image Preview
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function CoffeePreview(sel) {
document.getElementById('preview').src = "" + sel.options[sel.selectedIndex].value;
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<form name=previewselect>
<select name=selbox size=1 onChange="CoffeePreview(this)">
<option value="http://www.javascriptfreecode.com/files/ci_1-small.jpg">Image #1
<option value="http://www.javascriptfreecode.com/files/ci_2-small.jpg">Image #2
<option value="http://www.javascriptfreecode.com/files/ci_3-small.jpg">Image #3
<option value="http://www.javascriptfreecode.com/files/ci_4-small.jpg">Image #4
<option value="http://www.javascriptfreecode.com/files/ci_5-small.jpg">Image #5
<option value="http://www.javascriptfreecode.com/files/ci_6-small.jpg">Image #6
</select>
<p>
<img name="preview" id='preview' src="http://www.javascriptfreecode.com/files/ci_1-small.jpg" width=150 height=113 border=1>
<p>
</form>
</center><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
CryptoTech, AstroAudrey, admin_js, bloxio, yqaice
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!