ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【javascript】cssスプライトを再現

javascriptcssスプライトを再現

後からもっとスマートなやり方に改変していきたいと思います。

・4/7時点でのDEMO

html

<ul>
<li><a href="#"><img src="img/js_sp1.jpg" onmouseover="this.src='img\/js_sp6.jpg';" onmouseout="this.src='img\/js_sp1.jpg';" name="a">HOME</li>
<li>
<a href="#"><img src="img/js_sp2.jpg" onmouseover="this.src='img\/js_sp7.jpg';" onmouseout="this.src='img\/js_sp2.jpg';">CAFE</li>
<li>
<a href="#"><img src="img/js_sp3.jpg" onmouseover="this.src='img\/js_sp8.jpg';" onmouseout="this.src='img\/js_sp3.jpg';">DRINK</li>
<li>
<a href="#"><img src="img/js_sp4.jpg" onmouseover="this.src='img\/js_sp9.jpg';" onmouseout="this.src='img\/js_sp4.jpg';">INFOMATION</li>
<li>
<a href="#"><img src="img/js_sp5.jpg" onmouseover="this.src='img\/js_sp10.jpg';" onmouseout="this.src='img\/js_sp5.jpg';">CONTACT</li>
</ul>
<script>
function change(){
	a.src = 'img\/js_sp6.jpg';
}
function end(){
	a.src = 'img\/js_sp1.jpg';
}
</script>

css

ul,li{
	padding:0;
	margin:0;
}
ul{
	width:800px;
	margin:0 auto;
	list-style:none;
	overflow:hidden;
}
li{
	float:left;
	width:160px;
	line-height:40px;
	height:50px;
	background:#090;
	text-align:center;
	overflow:hidden;
}
a{
	display:block;
	text-decoration:none;
}