'S js essay (js image switching effect)

The webpage effect of a partner should be colored when you move the mouse over the image. This is a simple color change, but the problem is that the image height and width are not the same.

This is troublesome. If you put an image in the background, you need to define the container outside the image one by one <a> </a>. It is too troublesome to write more stacked styles. Finally, I decided, assign a half of the Image Height and the image width to the container outside the image. <a> </a>

Then the image is processed as follows:

When you move the mouse over the image and move it up to 30 pixels, move it back to the original position.
The html code is as follows:
Copy codeThe Code is as follows:
<! -- Partner_box -->
<Div class = "partner_box">
<Div class = "partner_list">
<Div class = "partner_listright">
<Div class = "parter_content">
<H2> partner <Div id = "box_list"> <a href = "#"> </a> <a href = "#"> </a> <a href = "#"> </a> <a href = "#"> </a> <a href = "#"> </a> <a href = "#"> </a> <a> href = "#"> </a> <a href = "#"> </a> <a href =" # "> </a> </div>
</Div>
</Div>
</Div>
</Div>
<! -- Partner_box end -->

Css is as follows: (color and structure are separated for future skin changes)
Copy codeThe Code is as follows:
/* Partner */
. Partner_box {height: 112px; padding-top: 20px ;}
. Partner_box. partner_list {width: 910px; height: 93px; margin: 0 auto ;}
. Partner_box. partner_list h2 {text-align: center; height: 30px; line-height: 30px ;}
. Partner_box. partner_list # box_list {margin-top: 15px ;}
. Partner_box. partner_list # box_list a {margin-left: 13px; display: inline-block; height: 31px; float: left; overflow: hidden ;}
/*. Partner_box */
. Partner_box {background: url (../images/partner_box_bc.jpg) repeat-x ;}
. Partner_list {background: url (../images/friend_icon.png) 0% 0% no-repeat ;}
. Partner_list. partner_listright {background: url (../images/friend_icon_right.png) 100% 0% no-repeat ;}
. Partner_list. partner_listright. parter_content {background: url (../images/friend_icon_midibe.png) repeat-x; margin: 0px 8px 0px 9px; height: 93px ;}
. Partner_box. partner_list h2 {font-size: 14px; border-bottom: 1px dashed #999999; color: # 0f0f0f ;}

Javascript is as follows:
Copy codeThe Code is as follows:
// The color change of the partner
Window. onload = function (){
Friend ();
}
Function friend (){
If (! Document. getElementById) return false;
If (! Document. getElementsByTagName) return false;
If (! Document. getElementById ("box_list") return false;
Var footer = document. getElementById ("box_list ");
Var img_list = footer. getElementsByTagName ("img ");
For (var I = 0; I <9; I ++ ){
// Var img_h = img_list [I]. clientHeight;
Var img_w = img_list [I]. clientWidth;
// Img_list [I]. parentNode. style. height = "31px ";
Img_list [I]. parentNode. style. width = img_w + "px ";
Img_list [I]. parentNode. style. position = "relative ";
Img_list [I]. style. position = "absolute ";
Img_list [I]. style. top = "0px ";
Img_list [I]. style. left = "0px ";
Img_list [I]. onmouseover = function (){
This. style. top = "-35px ";
}
Img_list [I]. onmouseout = function (){
This. style. top = "0px ";
}
}
}