怎么做几排小格子的图片框
日期：2014-05-17 浏览次数：20681 次
如何做几排小格子的图片框
各位好！
我做一个网页，需要放很多照片，如何能作出几排小格子的图片框，然后点击这个小图片再弹出大的照片。这几排图片框是否就用table来做？
------解决方案--------------------
首先应该把大图片截成缩略图,这样可以节省带宽~~~
如果不截成缩略图,简单点可以这样做;
<html>
<style>
table img{
height:80px;
width:80px;
cursor:hand;
}
</style>
<script>
function showBig(img){
window.open(img.src);
}
</script>
<body>
<table>
<tr>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
</tr>
<tr>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
</tr>
</table>
</body>
</html>
各位好！
我做一个网页，需要放很多照片，如何能作出几排小格子的图片框，然后点击这个小图片再弹出大的照片。这几排图片框是否就用table来做？
------解决方案--------------------
首先应该把大图片截成缩略图,这样可以节省带宽~~~
如果不截成缩略图,简单点可以这样做;
<html>
<style>
table img{
height:80px;
width:80px;
cursor:hand;
}
</style>
<script>
function showBig(img){
window.open(img.src);
}
</script>
<body>
<table>
<tr>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
</tr>
<tr>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
<td> <img src= "01.jpg " onclick= "showBig(this) " title= "点击放大 " /> </td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
