File: simple_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Image Selector   simple_example.html   Download  
File: simple_example.html
Role: Example script
Content type: text/plain
Description: Simple example
Class: Image Selector
Preview images defined in select input options
Author: By
Last change:
Date: 12 years ago
Size: 1,806 bytes


Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * Feel free to distribute and modify code, but keep reference to its creator * * Image Selector class creates an image selector input with image preview based on select element. * Images can be changed using select element itself or by clicking on image. * Additionally this class provides API to select first, last, next or previous images or an image with specific index. * It also can regenerate preview images for dynamical input manipulations. * * For more information, examples and online documentation visit: * **************************************************************/ --> <!DOCTYPE html> <html> <head> </head> <body> <p>Click on image to change it</p> <p><select name='image' id='images'> <option value=''>Facebook</option> <option value=''>Twitter</option> <option value=''>Draugiem</option> <option value=''>Reddit</option> </select></p> <p><input type='button' value='Get value' onclick='alert(document.getElementById("images").value);'/></p> <script type="text/javascript" src="./image_selector.packed.js" ></script> <script type="text/javascript"> var imgs = new image_selector("images",{ //width of images width: 100, //height of images height: 100, //change image on click changeOnClick: true, //hide original input hideInput: true, }); </script> </body> </html>