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.
<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>
var wid = "450";
//Fix the width of Popup Window
var hei = "450";
//Fix the width of Popup Window
function 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();
}
#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.