Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- 221indexB.html demonstrates basic JavaScript and CSS
- Unpublished work (c)2013 Project Lead The Way
- CSE Activity 2.2.1 HTML5andJavaScript
- Version 12/19/2013
- -->
- <html>
- <head>
- <style type = "text/css">
- #img1popout {
- z-index: 5;
- position: absolute;
- width: 550px;
- height: 300px;
- top: 50px;
- border: 1px dashed #000099;
- background-color: #ddddff;
- }
- #img1popin{}
- </style>
- <script type = "text/javascript">
- function showDetailedView(the_image)
- {
- var id=the_image.id;
- 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> "
- var im1 = document.getElementById("img1popin");
- im1.id = "img1popout";
- im1.innerHTML = my_html;
- var popOut = document.getElementById("img1popout");
- popOut.onmouseout = hideDetailedView;
- }
- function hideDetailedView()
- {
- var im1 = document.getElementById("img1popout");
- im1.id = "img1popin";
- im1.innerHTML = "";
- }
- </script>
- </head>
- <body>
- <br>
- <table>
- <caption>Your Results:</caption>
- <tbody>
- <tr>
- <td>
- <img id="pic1" onmouseover="showDetailedView(this)" src="aprilla/pic1thumb.jpg"><div id = "img1popin"></div>
- </td>
- <td>
- <img id="pic2" onmouseover="showDetailedView(this)" src="aprilla/pic2thumb.jpg">
- </td>
- <td>
- <img id="pic3" onmouseover="showDetailedView(this)" src="aprilla/pic3thumb.jpg">
- </td>
- <td>
- <img id="pic4" onmouseover="showDetailedView(this)" src="aprilla/pic4thumb.jpg">
- </td>
- <td>
- <img id="pic5" onmouseover="showDetailedView(this)" src="aprilla/pic5thumb.jpg">
- </td>
- <td>
- <img id="pic6" onmouseover="showDetailedView(this)" src="aprilla/pic6thumb.jpg">
- </td>
- </tr>
- <tr>
- <td>
- <img id="pic7" onmouseover="showDetailedView(this)" src="aprilla/pic7thumb.jpg">
- </td>
- <td>
- <img id="pic8" onmouseover="showDetailedView(this)" src="aprilla/pic8thumb.jpg">
- </td>
- <td>
- <img id="pic9" onmouseover="showDetailedView(this)" src="aprilla/pic9thumb.jpg">
- </td>
- <td>
- <img id="pic10" onmouseover="showDetailedView(this)" src="aprilla/pic10thumb.jpg">
- </td>
- <td>
- <img id="pic11" onmouseover="showDetailedView(this)" src="aprilla/pic11thumb.jpg">
- </td>
- <td>
- <img id="pic12" onmouseover="showDetailedView(this)" src="aprilla/pic12thumb.jpg">
- </td>
- </tr>
- <tr>
- <td>
- <img id="pic13" onmouseover="showDetailedView(this)" src="aprilla/pic13thumb.jpg">
- </td>
- <td>
- <img id="pic14" onmouseover="showDetailedView(this)" src="aprilla/pic14thumb.jpg">
- </td>
- <td>
- <img id="pic15" onmouseover="showDetailedView(this)" src="aprilla/pic15thumb.jpg">
- </td>
- </tr>
- </tbody>
- </table>
- <br>
- Search the art database using the fields below.
- <form method="post" action="index1.html">
- <pre>
- First Name
- <input type="text" name="firstname">
- <br>
- Last Name
- <input type="text" name="lastname">
- <br>
- <input type="submit" value="SEARCH">
- </pre>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement