メディアブルデザインの制作書庫

MediableDesign - 制作書庫

ロールオーバーボタンを作る[画像編]


用意するファイル
┣ボタン画像:test1.gif
┣ボタン画像(ロールオーバー時):test2.gif
┗ボタン画像(透明):test3.gif

・一つのボタンに対して3つの画像ファイルを作る。ココでは仮に
ファイル名:[test1.gif][test2.gif][test3.gif]
サイズ:width=100px_height=100px
とする。
※1この時、3つのファイルの縦・横のサイズを同じにしておく。
※2[test3.gif]は100x100の透明画像にする。

・CSSに次のように記述。

.btn{ width: 100px; height: 100px;}
.btn a{
background-image: url(img/test1.gif);
background-repeat: no-repeat;
display: block;
}
.btn a:hover{
background-image: url(img/test2.gif);
background-repeat: no-repeat;
}

・この記述で【.btn】に囲まれた画像が<a></a>で囲まれていると【.btn a】の[background-image]の画像が表示され、ロールオーバー時には【.btn a:hover】の[background-image]の画像が表示されるようになります。

・これを踏まえた上で、HTMLにはボタンを表示させたい所で次のように記述します。
<div class="btn"><a href="#"><img src="img/test3.gif" border="0" /></a></div>

以上でロールオーバーボタンの完成です。


同じカテゴリの記事

ロールオーバーボタンを作る~画像無し

borderプロパティ-線種

リンクテキストの設定

CSSを使った全体設定

CSSを使ったの背景画像

50,000円からのホームページ制作
月額10,000円からのホームページ更新・運営代行

powered by MediableDesign(メディアブルデザイン)
このウェブサイト上の文章、映像、写真などの著作物の全部、または一部を了承なく複製、使用することを禁じます。
COPYRIGHT © MediableDesign All Right Reserved.