table样式加上图片切换效果

有时候一个平面设计可能往往被要求实现一些比较简单的样式，下面就讲一下如何做图片切换效果，其实很简单，以下图片切换效果的源码，关于table表格 +jquery代码的实现方式

<!---定义一个table的ID为imgList 方便后面样式和javascript调用-->   <!--a标签里面的href="#" #可以替换成任意网址 如:<a href="#">改成<a href="http://www.baidu.com">-->   <!--img参数说明：   <img src="这里存放的当前图片地址" tempsrc="这里存放的是鼠标移上去切换的图片地址"  width="这里是图片宽度"  height="这里是图片高度" />   -->   <!---style样式说明:      #imgList td{ padding-left:10px;padding-top:10px;}      1.#imgList表示的是table这个对象 td就是里面每个小方块      2.padding-left:10px; 表示每个td小方块距离左边的间距      3.padding-top:10px;表示距离上面的td小方块的距离   -->   <!---script功能说明：      写的javascript脚本代码 就是图片切换的效果，直接复制就好了 不用改代码   -->   <!---使用方法：   1.复制--从代码开始--到--代码结束--代码   2.替换里面的src 图片地址 和tempsrc 图片地址   -->   <!--代码开始-->   <script src="http://code.jquery.com/jquery-latest.js"></script>   <table id="imgList" cellpadding="0" cellspacing="0" border="0">      <tr>        <!---这里的colspan为2表示两个td合并成一个-->        <td colspan="2">           <a href="#"><img src="img/1.jpg" tempsrc="img/2.jpg" width="200"  height="100"  /></a>        </td>        <td>           <a href="#"><img src="img/2.jpg" width="100"  tempsrc="img/1.jpg" height="100"   /></a>        </td>      </tr>      <tr>        <td>           <a href="#"><img src="img/1.jpg" tempsrc="img/2.jpg"  width="100" height="100"   /></a>        </td>        <td>           <a href="#"><img src="img/2.jpg" tempsrc="img/3.jpg"  width="100" height="100"   /></a>        </td>        <td>           <a href="#"><img src="img/3.jpg" tempsrc="img/1.jpg"  width="100" height="100"   /></a>        </td>      </tr>      <tr>        <td>           <a href="#"><img src="img/2.jpg" tempsrc="img/4.jpg"  width="100" height="100"   /></a>        </td>        <!---这里的colspan为2表示两个td合并成一个-->        <td colspan="2">            <a href="#"><img src="img/4.jpg" tempsrc="img/2.jpg"  width="200" height="100"   /></a>        </td>      </tr>   </table>   <style>   #imgList td{ padding-left:10px; padding-top:10px;}/***这里的10就是距离左边的间隔***/   </style>   <script>        $(document).ready(function(){             //定义原来图片的src             var imgsrc="";             $("#imgList img").hover(             function(){                 imgsrc=$(this).attr("src");                 var newImgsrc=$(this).attr("tempsrc");                 $(this).attr("src",newImgsrc);             },             function(){                 $(this).attr("src",imgsrc);                 imgsrc="";//重置imgsrc             });        })     </script>   <!--代码结束-->