<style><!--
/*CSS样式表*/
#bottom
{
width:550px;
height:150px;
bottom:0px;
left:280px;
position:fixed;}
.bottom0
{
width:150px;
height:150px;
position:absolute;}
#bottom01
{
top:0px;
left:0px;
}
#bottom02
{
top:0px;
left:120px;
}
#bottom03
{
top:0px;
left:240px;
}
#bottom04
{
top:0px;
left:360px;
}
.img01
{
width:100px;
height:100px;
top:25px;
left:25px;
position:absolute;
}
--></style>
<div >
<div /></a></div>
<div /></a></div>
<div /></div>
<div /></div>
</div>
<script type="text/javascript" language="javascript">// <![CDATA[/*JS部分*/
function over01()
{
var h=document.getElementsByClassName("img01");/*定义h来接收图片的样式*/
h.item(0).style.width=150+'px';/*将h里的图片宽度改变为150px,这里赋值的是字符串形式,所以要用+和单引号*/
h.item(0).style.height=150+'px';/*同理分别改变图片的高度值*/
h.item(0).style.top=0+'px';/*改变图片与DIV上边的的定位值*/
h.item(0).style.left=0+'px';/*改变图片与DIV左边的定位值*/
}
function out01()/*定义out事件将改变的值再改回原值*/
{
var h=document.getElementsByClassName("img01");
h.item(0).style.width=100+'px';
h.item(0).style.height=100+'px';
h.item(0).style.top=25+'px';
h.item(0).style.left=25+'px';
}
function over02()
{
var h=document.getElementsByClassName("img01");
h.item(1).style.width=150+'px';
h.item(1).style.height=150+'px';
h.item(1).style.top=0+'px';
h.item(1).style.left=0+'px';
}
function out02()
{
var h=document.getElementsByClassName("img01");
h.item(1).style.width=100+'px';
h.item(1).style.height=100+'px';
var g=document.getElementById("bottom02");
h.item(1).style.top=25+'px';
h.item(1).style.left=25+'px';
}
function over03()
{
var h=document.getElementsByClassName("img01");
h.item(2).style.width=150+'px';
h.item(2).style.height=150+'px';
h.item(2).style.top=0+'px';
h.item(2).style.left=0+'px';
}
function out03()
{
var h=document.getElementsByClassName("img01");
h.item(2).style.width=100+'px';
h.item(2).style.height=100+'px';
h.item(2).style.top=25+'px';
h.item(2).style.left=25+'px';
}
function over04()
{
var h=document.getElementsByClassName("img01");
h.item(3).style.width=150+'px';
h.item(3).style.height=150+'px';
h.item(3).style.top=0+'px';
h.item(3).style.left=0+'px';
}
function out04()
{
var h=document.getElementsByClassName("img01");
h.item(3).style.width=100+'px';
h.item(3).style.height=100+'px';
h.item(3).style.top=25+'px';
h.item(3).style.left=25+'px';
}
// ]]></script>
效果图