图片的预览

将鼠标放在链接上，可以通过触发onMouseOver（）方法来显示图片的预览.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>超链接页面预览</title>
 6 </head>
 7 <body bg="#ffccoo">
 8 <form name="form1">
 9     <h1>超链接预览</h1>
10     <h5>将鼠标上看预览图片</h5>
11     <table border="1"bordercolor="green" cellspacing="15" cellpadding="15">
12         <tr>
13         <td>
14         <a href="" name="link1" onMouseOver="link1Over()">内部链接一</a><br><br>
15         <a href="" name="link2" onMouseOver="link2Over()">内部链接二</a><br><br>
16         <a href="" name="link3" onMouseOver="link3Over()">内部链接三</a><br><br>
17         <a href="" name="link4" onMouseOver="link4Over()">内部链接四</a><br><br>
18         <a href="" name="link5" onMouseOver="link5Over()">内部链接五</a>
19     </td>
20     <td>
21         <img src="./image/1.jpg" name="img1"  width=236 height=150 alt="显示图片">
22     </td>
23 </tr>
24     </table>
25 </form>
26 </body>
27 <script language="javascript">
28                 function link1Over(){
29                     document.form1.img1.src="./image/1.jpg"
30                 }
31                   function link2Over(){
32                     document.form1.img1.src="./image/c2.jpg"
33                 }
34                   function link3Over(){
35                     document.form1.img1.src="./image/c3.jpg"
36                 }
37                   function link4Over(){
38                     document.form1.img1.src="./image/05.jpg"
39                 }
40                   function link5Over(){
41                     document.form1.img1.src="./image/07.jpg"
42                 }
43 
44 </script>
45 </html>

 

posted @ 2016-10-09 15:44  波~波  阅读(132)  评论(0)    收藏  举报