Advertisement
Guest User

Untitled

a guest
Mar 21st, 2018
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.06 KB | None | 0 0
  1. <!--
  2. 221indexB.html demonstrates basic JavaScript and CSS
  3. Unpublished work (c)2013 Project Lead The Way
  4. CSE Activity 2.2.1 HTML5andJavaScript
  5. Version 12/19/2013
  6. -->
  7.  
  8. <html>
  9. <head>
  10. <style type = "text/css">
  11. #img1popout {
  12. z-index: 5;
  13. position: absolute;
  14. width: 550px;
  15. height: 300px;
  16. top: 50px;
  17. border: 1px dashed #000099;
  18. background-color: #ddddff;
  19. }
  20. #img1popin{}
  21.  
  22. </style>
  23. <script type = "text/javascript">
  24. function showDetailedView(the_image)
  25. {
  26. var id=the_image.id;
  27. var my_html = "<br /><TABLE><TR><TH rowspan='3'><img src='aprilla/"+ id +".jpg' width='250'><TH align='left'>Artist's Name: <TH align='left'>Aprill Aronie<TR><TH align='left'>File Name: <TH align='left'>"+id+".jpg<TR></TABLE> "
  28. var im1 = document.getElementById("img1popin");
  29. im1.id = "img1popout";
  30. im1.innerHTML = my_html;
  31. var popOut = document.getElementById("img1popout");
  32. popOut.onmouseout = hideDetailedView;
  33. }
  34. function hideDetailedView()
  35. {
  36. var im1 = document.getElementById("img1popout");
  37. im1.id = "img1popin";
  38. im1.innerHTML = "";
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <br>
  44. <table>
  45. <caption>Your Results:</caption>
  46. <tbody>
  47. <tr>
  48. <td>
  49. <img id="pic1" onmouseover="showDetailedView(this)" src="aprilla/pic1thumb.jpg"><div id = "img1popin"></div>
  50. </td>
  51. <td>
  52. <img id="pic2" onmouseover="showDetailedView(this)" src="aprilla/pic2thumb.jpg">
  53. </td>
  54. <td>
  55. <img id="pic3" onmouseover="showDetailedView(this)" src="aprilla/pic3thumb.jpg">
  56. </td>
  57. <td>
  58. <img id="pic4" onmouseover="showDetailedView(this)" src="aprilla/pic4thumb.jpg">
  59. </td>
  60. <td>
  61. <img id="pic5" onmouseover="showDetailedView(this)" src="aprilla/pic5thumb.jpg">
  62. </td>
  63. <td>
  64. <img id="pic6" onmouseover="showDetailedView(this)" src="aprilla/pic6thumb.jpg">
  65. </td>
  66. </tr>
  67. <tr>
  68. <td>
  69. <img id="pic7" onmouseover="showDetailedView(this)" src="aprilla/pic7thumb.jpg">
  70. </td>
  71. <td>
  72. <img id="pic8" onmouseover="showDetailedView(this)" src="aprilla/pic8thumb.jpg">
  73. </td>
  74. <td>
  75. <img id="pic9" onmouseover="showDetailedView(this)" src="aprilla/pic9thumb.jpg">
  76. </td>
  77. <td>
  78. <img id="pic10" onmouseover="showDetailedView(this)" src="aprilla/pic10thumb.jpg">
  79. </td>
  80. <td>
  81. <img id="pic11" onmouseover="showDetailedView(this)" src="aprilla/pic11thumb.jpg">
  82. </td>
  83. <td>
  84. <img id="pic12" onmouseover="showDetailedView(this)" src="aprilla/pic12thumb.jpg">
  85. </td>
  86. </tr>
  87. <tr>
  88. <td>
  89. <img id="pic13" onmouseover="showDetailedView(this)" src="aprilla/pic13thumb.jpg">
  90. </td>
  91. <td>
  92. <img id="pic14" onmouseover="showDetailedView(this)" src="aprilla/pic14thumb.jpg">
  93. </td>
  94. <td>
  95. <img id="pic15" onmouseover="showDetailedView(this)" src="aprilla/pic15thumb.jpg">
  96. </td>
  97. </tr>
  98. </tbody>
  99. </table>
  100. <br>
  101. Search the art database using the fields below.
  102. <form method="post" action="index1.html">
  103. <pre>
  104. First Name
  105. <input type="text" name="firstname">
  106. <br>
  107. Last Name
  108. <input type="text" name="lastname">
  109. <br>
  110. <input type="submit" value="SEARCH">
  111. </pre>
  112. </form>
  113. </body>
  114. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement