【代码应用】用代码制作点击小图看大图

代 码 复 制 如 下:

代码

<TABLE title=http://xuefeibingjie.blog.163.com/ border=0 cellSpacin<div align="center"> <table height="480" cellspacing="1" cellpadding="0" width="660" bgcolor="#000000" border="1"> <tbody> <tr> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_2.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_2.jpg" width="180"></a></td></tr></tbody></table></div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_3.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_3.jpg" width="180"></a></td></tr></tbody></table></div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_4.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_4.jpg" width="180"></a></td></tr></tbody></table></div></td></tr> <tr> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_5.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_5.jpg" width="180"></a></td></tr></tbody></table></div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_6.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_6.jpg" width="180"></a></td></tr></tbody></table> </div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_7.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_7.jpg" width="180"></a></td></tr></tbody></table></div></td></tr> <tr> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_8.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_8.jpg" width="180"></a></td></tr></tbody></table></div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_9.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_9.jpg" width="180"></a></td></tr></tbody></table></div></td> <td> <div align="center"> <table bordercolor="#cd0000" height="120" width="180" border="1"> <tbody> <tr> <td><a target="cont" href="http://image53.360doc.com/DownloadImg/2012/07/2108/25649607_10.jpg"><img title="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" alt="2012年05月05日 - 夕阳无限美 - 夕阳无限美de博客" height="120" src="//image53.360doc.com/DownloadImg/2012/07/2108/25649607_10.jpg" width="180"></a> </td></tr></tbody></table></div> </td></tr></tbody></table></div>

显示

现在网上通用流行的点击小图浏览大图在博客日志应用上很实用。下面这组代码可帮您实现.

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

<A href="大图地址"><IMG src="小图址址" border=0></A> </TD><TD>

.............................................

上面代码中的大图地址就是您最终想展示给大家的最后''原图''地址。小图地址是像册本身的最始图片地址。..................是您想再加多少的省略。

上面是实际效果图

请您点击小图欣赏大图

怎么样？不错吧！快试试吧。也许您会从实践中摸索出更美妙的效果！代码就是这样神奇。但必须多实践！祝您成功！！