问题描述
一个DIV层有四组图片（每组4张）在DIV层右下角有四个小方块的按钮当鼠标移动到第一个小方块上时就显示第一组图片（4张）移动到第二个小方块上时就显示第二组图片（4张）移动到第三个小方块上时就显示第三组图片（4张）移动到第四个小方块上时就显示第四组图片（4张）
解决方案
解决方案二：
自己写一个就是了使用jquery来处理事件<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="PictureGallary.aspx.cs"Inherits="WebApplication1.PictureGallary"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="JS/jquery-1.4.2.js"type="text/javascript"></script><scripttype="text/javascript">$(function(){$("#tr1").show();$("#tr2").hide();$("#tr3").hide();$("#tr4").hide();$("#sp1").mouseenter(function(){$("#tr1").show();$("#tr2").hide();$("#tr3").hide();$("#tr4").hide();});$("#sp2").mouseenter(function(){$("#tr1").hide();$("#tr2").show();$("#tr3").hide();$("#tr4").hide();});$("#sp3").mouseenter(function(){$("#tr1").hide();$("#tr2").hide();$("#tr3").show();$("#tr4").hide();});$("#sp4").mouseenter(function(){$("#tr1").hide();$("#tr2").hide();$("#tr3").hide();$("#tr4").show();});});</script></head><body><formid="form1"runat="server"><div><table><trid="tr1"><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"alt=""/></td></tr><trid="tr2"><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"alt=""/></td></tr><trid="tr3"><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"alt=""/></td></tr><trid="tr4"><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"alt=""/></td></tr><tr><tdcolspan="4"align="right"><spanid="sp1"style="border:thicksolidred">1</span><spanid="sp2"style="border:thicksolidred">2</span><spanid="sp3"style="border:thicksolidred">3</span><spanid="sp4"style="border:thicksolidred">4</span></td></tr></table></div></form></body></html>
解决方案三：
要保持图片大小一致<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="PictureGallary.aspx.cs"Inherits="WebApplication1.PictureGallary"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="JS/jquery-1.4.2.js"type="text/javascript"></script><scripttype="text/javascript">$(function(){$("#tr1").show();$("#tr2").hide();$("#tr3").hide();$("#tr4").hide();$("#sp1").mouseenter(function(){$("#tr1").show();$("#tr2").hide();$("#tr3").hide();$("#tr4").hide();});$("#sp2").mouseenter(function(){$("#tr1").hide();$("#tr2").show();$("#tr3").hide();$("#tr4").hide();});$("#sp3").mouseenter(function(){$("#tr1").hide();$("#tr2").hide();$("#tr3").show();$("#tr4").hide();});$("#sp4").mouseenter(function(){$("#tr1").hide();$("#tr2").hide();$("#tr3").hide();$("#tr4").show();});});</script></head><body><formid="form1"runat="server"><div><table><trid="tr1"><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg"width="50"height="50"alt=""/></td></tr><trid="tr2"><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/6/D/0/2_z81434362.jpg"width="50"height="50"alt=""/></td></tr><trid="tr3"><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/8/2/5/2_bdmh.jpg"width="50"height="50"alt=""/></td></tr><trid="tr4"><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"width="50"height="50"alt=""/></td><td><imgsrc="http://avatar.profile.csdn.net/0/B/1/2_wgejydy.jpg"width="50"height="50"alt=""/></td></tr><tr><tdcolspan="4"align="right"><spanid="sp1"style="border:thicksolidred">1</span><spanid="sp2"style="border:thicksolidred">2</span><spanid="sp3"style="border:thicksolidred">3</span><spanid="sp4"style="border:thicksolidred">4</span></td></tr></table></div></form></body></html>