9个正方形格子，5张缩略图（是动态从upload目录读取的），鼠标移动到5张图片上时，图片所在格子放大，其他格子被撑小。
9个正方形格子，5张缩略图（是动态从upload目录读取的），鼠标移动到5张图片上时，图片所在格子放大，其他格子被撑小。
利用css+div，如何制作这样的效果？
http://forum.flashempire.com/attachment.php?attachmentid=38956&stc=1
[解决办法]
用一个DIV
[解决办法]
<style>
#main {width:304px;height:304px;border-top:1px solid #ccc;border-left:1px solid #ccc}
#ul {list-style:none;padding:0px;margin:0px;}
#main div {width:101px;height:101px;float:left;border-right:1px solid #ccc;border-bottom:1px solid #ccc}
#imgtable img {height:100px;width:100px;border:0px;;padding:0px;margin:0px;}
#imgtable A:hover {background:#ccc;}
#imgtable A:hover img {height:302px;width:302px;position:absolute;}
A:hover div {width:300px;height:300px;position:absolute;}
</style>
<div id= "main ">
<a href= "1 "> <div id= "imgtable "> <img src= "001.jpg " alt= "1 "> </div> </a>
<div> 2 </div>
<div id= "imgtable "> <a href= "2 "> <img src= "001.jpg " alt= "3 "> </a> </div>
<div> 4 </div>
<div id= "imgtable "> <a href= "3 "> <img src= "001.jpg " alt= "5 "> </a> </div>
<div> 6 </div>
<div id= "imgtable "> <a href= "4 "> <img src= "001.jpg " alt= "7 "> </a> </div>
<div> 8 </div>
<div id= "imgtable "> <a href= "5 "> <img src= "001.jpg " alt= "9 "> </a> </div>
</div>
用css+div不会写，不会定位~用JS可行~
[解决办法]
<style type= "text/css ">
.wrapper{
width: 300px;
height: 300px;
position: relative;
}
.cell{
width: 100px;
height: 100px;
float: left;
border: 1px solid #666666;
background: #CCCCCC
}
.cellMouseover{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #FF0000;
background: #FFCC00;
}
</style>
<div class= "wrapper ">
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
<div class= "cell " onMouseOver= "this.className= 'cellMouseover ' " onMouseOut= "this.className= 'cell ' "> </div>
</div>
