鼠標移入移出，圖片放大縮小的特效

<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>

效果圖