鼠标移入移出，图片放大缩小的特效

<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 id="bottom"> <div id="bottom01" class="bottom0"><a title="主页面" href="http://www.cnblogs.com/Untitled-主页2.html"><img class="img01" onmouseover="over01()" onmouseout="out01()" src="http://www.cnblogs.com/img/back05.png" alt="" /></a></div> <div id="bottom02" class="bottom0"><a title="草帽海贼团" href="http://www.cnblogs.com/Untitled-草帽海贼团.html"><img class="img01" onmouseover="over02()" onmouseout="out02()" src="http://www.cnblogs.com/img/back06.png" alt="" /></a></div> <div id="bottom03" class="bottom0"><img class="img01" onmouseover="over03()" onmouseout="out03()" src="http://www.cnblogs.com/img/back08.png" alt="" /></div> <div id="bottom04" class="bottom0"><img class="img01" onmouseover="over04()" onmouseout="out04()" src="http://www.cnblogs.com/img/back07.png" alt="" /></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>

效果图