【CSS】cssを利用したロールオーバー

メニューボタンをタグの背景画像として貼っておき、マウスを乗せた時に座標をずらす。
一見画像メニューに見えるけど、中身はテキストなのでSEO的にもよさげだけど、スパムのような気がしなくもない。
大手サイトでもやってるからいいのかな。




<html>
<head>
<title>【CSS】CSSを利用したロールオーバー</title>
<style>
#menu li {
width:180px;
height:30px;
text-indent: -1000px;
list-style-type:none;
}
#menu li a{
display:block;
width:180px;
height:30px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
#menu li a:hover{
/*idがtabMenu02の中のliタグの中のaタグのマウスを乗せた時、背景画像を30pxずらす*/
background-position: -180px 0px;
}

#menu01{
background-image: url(20050603_illust_cssRollOver.jpg);
}
</style>
</head>
<body>
<div id="menu">
<ul style="margin:0px;">
<li><a href="#" id="menu01">メニューその1</a></li>
</ul>
</div>
</body>
</html>

2005-06-03 13:37:00

口コミ・コメント

コメントを書く