CSSでのロールオーバー
javascriptを使わない手法です。SEO的に・・・どうなんでしょう？
「text-indent:-9999px;」
html
<div id="menu1"><a href="#">キーワード</a></div>
CSS
#menu1 a{
background:url("イメージURL") no-repeat;
display:block;
text-indent:-9999;
width:100px;
height:30px;
}
#menu1 a:hover{
background:url("ロールオーバーイメージURL") no-repeat;
display:block;
text-indent:-9999;
width:100px;
height:30px;
}
フロートしているボックスの場合
<div id="menu1"><a href="#"><em>キーワード</em></a></div>
em{text-indent:-9999;
overflow:hidden;}
でもemの使い過ぎはSEOスパムになります。ご注意を！！
「height:0」
text-indent:-9999はFireFoxでリンク領域の点線がおかしくなるんですよねぇ。
Dreamweaverでの表示を気にしないなら
<div id="menu1"><a href="#">キーワード</a></div>
#menu a{
background:url("イメージURL") no-repeat;
display:block;
height:0;
overflow:hidden;
width:100px;
padding-top:30px;//箱の高さ分
}
こちらのほうがいいかも。キーワードもちゃんと埋め込めるし
なによりも、appleのサイトがこんな感じだったので
採用！！
