CSSでロールオーバー
JavasScriptも、画像置換も使わずにCSSでロールオーバー。
XHTML
<ul> <li id="a"><a href="..."><img src="img/a_off.gif" alt="a" /></a></li> <li id="b"><a href="..."><img src="img/b_off.gif" alt="b" /></a></li> <li id="c"><a href="..."><img src="img/c_off.gif" alt="c" /></a></li> <li id="d"><a href="..."><img src="img/d_off.gif" alt="d" /></a></li> </ul>
CSS
li { list-style-type:none; width: 130px; height: 30px; float: left; } li img { border: 0; } li#a { background: url(../img/a_on.gif) no-repeat; } li#b { background: url(../img/b_on.gif) no-repeat; } li#c { background: url(../img/c_on.gif) no-repeat; } li#d { background: url(../img/d_on.gif) no-repeat; } li a { display: block; width: 130px; height: 30px; } li a:hover { background-color: transparent; /* ie6対応 */ } li a:hover img { visibility: hidden; }
li要素の背景にロールオーバー時の画像を配置し、a要素にマウスが重なった際にimg要素のvisibilityをhiddenにしています。