Slide show showing pictures combo

Written by @kerixa 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 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/images/ci_1-small.jpg">Image #1
<option value="http://www.javascriptfreecode.com/images/ci_2-small.jpg">Image #2
<option value="http://www.javascriptfreecode.com/images/ci_3-small.jpg">Image #3
<option value="http://www.javascriptfreecode.com/images/ci_4-small.jpg">Image #4
<option value="http://www.javascriptfreecode.com/images/ci_5-small.jpg">Image #5
<option value="http://www.javascriptfreecode.com/images/ci_6-small.jpg">Image #6
</select>
<p>
<img name="preview" id='preview' src="http://www.javascriptfreecode.com/images/ci_1-small.jpg" width=150 height=113 border=1>
<p>
</form>
</center><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Shahmeer, coolcoco7, SmitaPatil25, owoboycute, 092010
advertisement 2