ホームページ作成(マウスで変化）
無料！発信中！メール情報誌！

ホームページ作成しよう！
HTML〜スタイルシート

ホームページ作成ＴＯＰ > マウスで変化 > １枚の画像を移動させる

ロールオーバー　１枚の画像を移動させる

マウスが上に来た時に、別々の画像では無く、１枚の画像の表示位置を移動させてロールオーバー効果を出す方法です。

ホームページ作成(ロールオーバー画像)

↑この１枚の画像の表示場所を『上下に移動させて』表示します。

１枚の画像なので、別々の画像で行う場合とは違い表示しない画像で先に読み込む必要がありません。

ここでは、javaを使用しない方法になります。

sample

↓　リストをメニューへ　↓

説明と書き方　

リスト（<ul>〜</ul>）で作成したメニューの各項目のリンクの背景に画像の上半分を表示し、マウスが上に来た時に背景画像を移動させて下半分を表示する事で実現可能です。
同時に文字色も変更してます。
（今回は、リストを使用してますが、リスト以外でも可能です。）

よって、画像の作りも上半分に最初に表示する画像、下半分に後の画像、という様に作りましょう。

半分の画像の高さが35pxに作ってありますので、下半分を表示する為background-position:0px -35px;で上方向に−３５ｐｘ移動して下半分を表示します。

リストをブロック範囲に変換してリンクさせる方法については、リストでメニューを作る（横並び）〜ブロック範囲でリンク〜を参照願います。

『＆』は<a href="">〜</a>の中で使用できないので　&amp;　として特殊文字としてあります。特殊文字に関しましては、1upホームページ作成のＴＯＰ > 文章や文字 > 特殊な文字を表示するを参照して下さい。

ＨＴＭＬ素材コードの書き方は

<ul>                                     <!-- ↓リストここから↓ -->
   <li><a href="リンク">TOP</a></li>     <!-- 項目１ -->
   <li><a href="リンク">NEWS</a></li>    <!-- 項目２ -->
   <li><a href="リンク">Q&amp;A</a></li>     <!-- 項目３ -->
</ul>                                    <!-- ↑リストここまで↑ -->
スタイルシート素材コードの書き方は

/* リスト全体 */
ul
   {
    width:450px;            /* リスト全体の幅 */
    height:35px;            /* リスト全体の高さ */
    list-style:none;        /* リストマークを無しにする */
    text-align:center;      /* 文字を中央 */
    font-size:130%;         /* 文字を大きく */
    font-weight:bold;       /* 文字を太く */
    line-height:150%;       /* 行の高さを調整 */
   }

/* 各項目 */
li
   {
    width:150px;            /* 項目の幅 */
    height:35px;            /* 項目の高さ */
    float:left;             /* 各項目を左側から回り込み */
   }

/* リンク部分 */
a
   {
    display:block;            /* リンク範囲をブロックに変換 */
    width:100%;               /* リンク範囲（幅）をリスト項目範囲全て */
    height:100%;              /* リンク範囲（高さ）をリスト項目範囲全て */
    background-image:url(画像);  /* リンク範囲の背景画像設定 */
    background-position:0px 0px; /* ★背景画像の（0px 0px）の位置★ */
    background-repeat:no-repeat; /* 背景画像繰り返し表示しない */
    color:#ffffff;            /* リンク文字色 */
   }

a:link
   {color:#ffffff;}         /* まだ見ていないリンク色 */

a:visited
   {color:#ffffff;}         /* 既に見たリンク色 */
 
a:hover
   {
    background-image:url(画像);     /* マウスが上に来た時の背景画像設定 */
    background-position:0px -35px;  /* ★背景画像を（0px -35px）に移動★ */
    color:#4a494a;          /* マウスが上に来た時の文字色 */
   }

ホームページ作成ＴＯＰ > マウスで変化 > １枚の画像を移動させる > このページのＴＯＰ　▲