HTML応用

HTML5

CSS3

jQuery

PHP

デザインのコツ

SEO対策

ロールオーバーを実装

マウスが乗っているとき、そうでないときで2枚の画像を切り替える場合、CSSの場合backgroundを使わなければなりません。

imgタグで表示している画像で同じ処理を実装する場合、jQueryを使うとよいでしょう。このページでは、jQueryを使ったロールオーバーの実装を解説します。

ファイルの準備

今回は、宣言文のみ入力したhtmlファイルと、jQuery本体とロールオーバー用のjsファイル、画像、マウスオン時の画像を用意しました。

ファイルセット「hover.zip」をダウンロード

上のボタンからダウンロードし、解凍後、以下の階層構造になっていることを確認してください。

    hover

  • index.html

      • img

    • main_off.jpg
    • main_on.jpg

      js

    • jquery.js
    • hover.js

今回用意したhover.jsでは、ファイル名（拡張子の直前）に「_off」を含む画像にマウスを乗せると「_off」を「_on」に置き換えたファイルを読み込むというもの。

つまり、「image_off.jpg」という画像をimgタグで表示した際、マウスを乗せると「image_on.jpg」に差し替わります。

head内でjQuery本体とhover.jsを読み込む

index.html
<head>
  <!-- ～省略～ -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/hover.js"></script>
</head>

では実際にimgタグで画像を貼って動作しているかを確認しましょう。

index.html
<body>
  <img src="img/main_off.jpg" alt="画像">
</body>

画像にマウスを乗せると、main_on.jpg（暗くした画像）に替わっていれば正しく動作しています。

見本ページを新しいタブで開く
PAGE TOP