Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Pictures & Slideshows >> Select Menu Picture Viewer


Code Snippet </> Info


Snippet Name: Select Menu Picture Viewer

Description: Create a select menu picture viewer.


Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser


Example: View Code Demo

Note: Add as many pictures as you like by simply adding more option values. All images need to be the same size declared in your IMG NAME="PREVIEW" tag.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-12-13 07:03:42

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<html> <head> <title>Select Menu Picture Viewer</title> <script> // Begin Select Menu Picture Viewer from http://snapbuilder.com Free Public Codes Library // Free to use as long as the credit lines remain in place function SnapItPreview(snap) { document.getElementById('preview').src = "" + snap.options[snap.selectedIndex].value; } // End --> </script> </head> <body> <center> <form name="previewselect"> <select name="snapbox" size="1" onChange="SnapItPreview(this)"> <option value="../images/select-pic-1.png">Image #1</option> <option value="../images/select-pic-2.png">Image #2</option> <option value="../images/select-pic-3.png">Image #3</option> <option value="../images/select-pic-4.png">Image #4</option> <option value="../images/select-pic-5.png">Image #5</option> <option value="../images/select-pic-6.png">Image #6</option> </select> <p><!-- Your first image must be named your #1 option value image named above --> <img name="preview" id="preview" src="../images/select-pic-1.png" width="174" height="273" border="0"></p> </form> </center> <br /> <p>[ YOUR CONTENT GOES HERE ]</p> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library