ドリル式ホームページの作り方

ロールオーバーボタンの作成(文字画像切替型)

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  ロールオーバーボタンの作成(文字画像切替型)

ロールオーバーボタンの作成(文字画像切替型)

文字画像を切り替える(hidden使用)

visibility:hiddenを利用したロールオーバーボタンのことです。

 

2枚の文字入り画像を初期の状態で重ねておいて、マウスカーソルが上にのっているときのみ、上にある画像をhidden(隠す)ことで、下の背景画像を表示させあたかも画像が切り替わっているかのように見せるテクニックです。

リスト項目には、文字でなく、文字入り画像を配置します。

<html>
<head>
<title>ロールオーバー2</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a2">
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
<li><a href="#"><img src="gif/49.gif" alt="" /></a></li>
</ul>
</body>
</html>

ついで、スタイルを以下のように指定します。マウスを当てたときに、上の画像が隠れる仕組みです。

ul#a2 li {
float:left;
width:150px;
height:40px;
display:inline;
list-style-type:none;
}
ul#a2 li a {
display:block;
position:relative;
background:url(../gif/50.gif) no-repeat;
}
ul#a2 li a:hover {
background-color:#fff;
}
ul#a2 li a:hover img {
visibility:hidden;
}

サンプル画像はコチラ→サンプル(ロールオーバー2)

文字画像を切り替える(onmouseover使用)

onmouseoverとonmouseoutを使用(javascriptなのかな?)したロールオーバーボタン作成法です。

この方法はスタイルシートを使わずに、imgにonmouseoverとonmouseout画像を指定するだけでできるので、一番簡単な方法なのかもしれません。

<html>
<head>
<title>ロールオーバー3</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a3">
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
<li><a href="#"><img src="../gif/49.gif" alt="ホーム" onmouseover="this.src='../gif/50.gif'" onmouseout="this.src='../gif/49.gif'" /></a></li>
</ul>
</body>
</html>

サンプル画像はコチラ→サンプル(ロールオーバー3)


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.