【教程】鼠标经过图片在其上显示一个小图标（二）js写法

效果说明：鼠标经过图1，变成图2样式，IE8下测试通过

                                 图1

                                 图2

下面介绍使用js来写

css代码

#c1 {
	width: 300px;
	height: 250px;
	border: 1px solid #000;
	position: relative;
}
#c1 .img1 {
	width: 300px;
	height: 250px;	
}
#c1 #c1_1 {
	width: 300px;
	height: 56px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 144px;	
	display: none;
}
#c1 #c1_2 {
	width: 300px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 200px;	
	background: #F00;
}
#c1 #c1_2 a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}
#c1 #c1_2 a:hover {
	color: #fff;
	text-decoration: underline;	
	font-weight: bold;	
}

html代码

<div id="c1">
	<img src="img02.jpg"  class="img1" onmouseover="showicon()" onmouseout="hideicon()"/>
    <div id="c1_1"><img src="icon01.png"/></div>
	<div id="c1_2"><a href="#">海运服务</a></div>
</div>

js代码

function showicon(){
	document.getElementById("c1_1").style.display="block";
}
function hideicon(){
	document.getElementById("c1_1").style.display="none";
}