Javascript - Image Popup

SUBMITTED BY: Guest

DATE: Oct. 8, 2013, 10 p.m.

FORMAT: JavaScript

SIZE: 1.6 kB

Raw Download

HITS: 1481

Report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style>
  6. #Container
  7. {
  8. width: 100%;
  9. height: 100%;
  10. }
  11. #Thumbs,
  12. #BigImgDiv
  13. {
  14. width:100%;
  15. height:100%;
  16. position:absolute;
  17. }
  18. #BigImgDiv
  19. {
  20. background-color:black;
  21. z-index:1;
  22. left:0px;
  23. top:0px;
  24. display:none;
  25. }
  26. #BigImg
  27. {
  28. position: absolute;
  29. margin: auto;
  30. top: 0;
  31. left: 0;
  32. right: 0;
  33. bottom: 0;
  34. }
  36. </style>
  37. <script>
  38. function expandImage(image) {
  39. var bigDiv = document.getElementById("BigImgDiv");
  40. bigDiv.innerHTML = "<img src='" + image + "' id='BigImg' />";
  41. bigDiv.style.display = "block";
  42. }
  43. function hideImage() {
  44. var bigDiv = document.getElementById("BigImgDiv");
  45. bigDiv.style.display = "none";
  46. }
  47. </script>
  50. </head>
  51. <body>
  52. <div id="Container">
  53. <div id="BigImgDiv" onclick="hideImage();"></div>
  54. <div id="Thumbs">
  55. <img src="image1.png" onclick="expandImage('bigimage1.png');" />
  56. <img src="image2.png" onclick="expandImage('bigimage2.png');" />
  57. </div>
  58. </div>
  60. </body>
  61. </html>
comments powered by Disqus