フリーサーバー招きねこ/海外無料サーバー紹介

http://freeserver.manekineco.net/800x600.jpg

  オススメ:

  容量:

  CGI:

  PHP:

  FTP:

  データーベース:

  メール:

  広告:

サンプル:サンプル:

wordpressに限ったコトじゃないですがｗ
JavasScriptを使わずCSSでスマートに画像ロールオーバーさせる方法

ますスタイルシート

/*範囲*/
#rollover{
margin:0px auto auto 0px;
}
#rollover a span{
display:none;
}
ul#rollover{
list-style:none;
width:100%;/*並べる画像全部の幅*/
}
ul#rollover li{
list-style:none;
float:left;
width:100px; /*画像1枚あたりの幅*/
}
ul#rollover a{
display:block;
width:100px;/*画像1枚あたりの幅*/
height:25px;/*画像の高さの半分*/
}
/*画像を増やす場合ここから追加*/
a.link1{
background-image:url(images/roll_sample.jpg);/*画像指定*/
}
a:hover.link1{
background-position:0px -25px;/*画像の高さの半分をマイナスで*/
}
/*ここまで増やす画像ごとに追加*/


画像を用意する。上が通常時、下がマウスオーバー時で
こんな感じで、上下にならべて1枚の画像にする。

タグはコンナ感じで

<ul id="rollover“>
<li><a href=”#” class=”link1“> </a></li>
…
…
</ul>

こうなる。画像を追加する場合 <li><a href=”リンク先” class=”link1“> </a></li>部分を追加
赤文字は任意で変更。

Firefoxで見るとズレる場合がある。
んなときは、スタイルシートに

html>/**/body
#rollover{
margin:0px auto auto 0px;
padding: 0px;
}

と追加する。 ”html>/**/body”以下はFirefoxが読み直してくれる。