220、放大展示效

220、放大展示效

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>-简单的图片放大展示效果</title>

<style>

.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}

.spic a:hover{font-size:9px;}

.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}

</style>

<script>

function seeBig(thispic) {

  if(thispic==1){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1002.jpg>'

  }

  if(thispic==2){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1003.jpg>'

  }

  if(thispic==3){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1004.jpg>'

  }

  if(thispic==4){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1005.jpg>'

  }

}

</script>

</head>

 

<body>

 

<table border="0" width="100%" cellspacing="3" cellpadding="3">

       <tr>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(1)" style="cursor:pointer">

              <img border="0" src="sto/1002.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(2)" style="cursor:pointer">

              <img border="0" src="sto/1003.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(3)" style="cursor:pointer">

              <img border="0" src="sto/1004.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(4)" style="cursor:pointer">

              <img border="0" src="sto/1005.jpg" width="50" height="50"></a></span></td>

       </tr>

       <tr>

              <td colspan="4" align="center" id="viewPic"><img border="0" src="sto/1006.jpg"></td>

       </tr>

</table>

 

</body>

 

</html>

 

Write a comment

Comments: 0