JavaScript DropDown Select Image View with Popup Window
 |
| javascript prompt box with drop down |
Hi Today We will Learn jquery popup drop down list.
When User will Select A Image From DropDown Menu The Selected Will Apear as Popup Window.
Create 3 files and 1 folder named:
1.index.html
2.script.js
3.style.css
4.image[folder]
images folder contain 4 images named:
1.image1.png
2.image2.png
3.image3.png
4.image4.png
 |
| javascript prompt box with drop down |
Now copy the Below Codes for Certain files.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html><head><title>JavaScript HTML Dropdown Image Show In Popup Window</title><script src="script.js" type="text/javascript"></script><link rel="stylesheet" href="style.css" type="text/css"/></head><body><div id="image"><h2>Select a Image To Display Popup</h2><form><select name="imagename" onChange="img_popup(this.form)"><option value="image/image1.png" SELECTED>Image 1<option value="image/image2.png">Image 2<option value="image/image3.png">Image 3<option value="image/image4.png">Image 4</select></form></div></body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var wid = "450";//Fix the width of Popup Windowvar hei = "450";//Fix the width of Popup Windowfunction img_popup(form) {selectionname = form.imagename.options[form.imagename.selectedIndex].text;selection = form.imagename.options[form.imagename.selectedIndex].value;Popup = window.open("", "PREVIEW", "toolbar=0,resize=0,status=0,menubar=0,scrollbars=0,width="+wid+",height="+hei);Popup.document.open();Popup.document.write("<html><title>Preview</title>");Popup.document.write("<body BGCOLOR=FFFFFF>");Popup.document.write("<form><center>" + selectionname + "<hr>");Popup.document.write("<img hspace=0 vspace=0 " + "src='" + selection + "'>");Popup.document.write("<hr><input type='button' value='Close' " + "onClick='window.close()'></form>");Popup.document.write("</center></body></html>");Popup.document.close();} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #image{background:#ccc;width:480px;height:520px;}h2{ color:green; text-decoration:underline;}select{padding:8px;width:30%;border-radius:4px;} |
Now Run the Index.html file and Select a Image from DropDown to View Result.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.