JavaScriptでロールオーバーメニューを作る [Cool Web Window]

Top ＞ webコラム＞素敵なサイトを作るために＞ JavaScriptでロールオーバーメニューを作る

JavaScriptでロールオーバーメニューを作る

オンマウスでメニュー画像を切り替えることができます。
CSSでもできますが、IEの設定によっては読み込みが遅い場合があります。
今回は、JavaSciptを使用する方法を紹介します。

以前の記事でもお伝えしましたが、IEの設定によってはなぜかCSSがちらつく場合があります。
CSSでちらつく場合はJavaSciptでロールオーバーというのもひとつの手です。

サンプル画像はこれ。カーソルを画像の上に載せてみてください。画像が切り替わりますよね。

基本的な書き方

JavaScriptコードは以下のように書きます。

var defImg;
function ImgChange(target, img){
  if(document.getElementById){
    defImg = document.getElementById(target).getAttribute("src");
    document.getElementById(target).setAttribute("src", img);
  }
}
function ImgBack(target){
  if(document.getElementById){
    document.getElementById(target).setAttribute("src",defImg);
  }
}

これを外部JavaScriptファイルとして、rollover.jsという名前をつけます。

HTMLコードを以下のように書きます。

<html>
<head>
<title></title>
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<a href="xxx.html">
<img src="image_off.gif" alt="menu" id="image1" 
onMouseOver="ImgChange('image1','image_on.gif')" 
onMouseOut="ImgBack('image1')">
</a>
</body>
</html>

Javascriptでロールオーバーにするためには似ているけどいろいろな書き方があります。
他のサイトなどもみてみてはどうでしょうか？

フレームワークを使ってより簡単なソースに

上述した書き方だと、なんだかソースが煩雑になってしまいますよね？
ロールオーバーをCSSで設定したときのように、よりHTMLのソースがクリーンにならないかな～？と思って探してみたらありました！
以下のサイトを参考にしています。
テレパス・ラボ : 画像のロールオーバー

「jquery.js」というフレームワークを使います。
まずは、jquery.jsを以下のサイトからダウンロードします。
http://jquery.com/

続いて、JavaSciptコードを以下のように書きます。

function initRollOverImages() {
  var image_cache = new Object();
  $("img.swap").each(function(i) {
    var imgsrc = this.src;
    var dot = this.src.lastIndexOf('.');
    var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
    image_cache[this.src] = new Image();
    image_cache[this.src].src = imgsrc_on;
    $(this).hover(
      function() { this.src = imgsrc_on; },
      function() { this.src = imgsrc; });
  });
}

$(document).ready(initRollOverImages);

これを外部JavaScriptファイルとして、rollover.jsという名前をつけます。

HTMLコードを以下のように書きます。

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<a href="xxx.html"><img src="image.gif" alt="menu" class="swap"></a>
</body>
</html>

jquery.jsとrollover.jsの両方を読み込むことを忘れずに。
ポイントは3つ。
・jquery.jsを先に読み込ませること。（head部分で先に記述すること。）
・ロールオーバーしたいimgタグに「class="swap"」を追加すること。
・マウスオン画像はマウスオフ画像に "_on" をつけたものにすること。

こうすると以下のようにロールオーバーができます！すごい！

ちなみにフレームワークというのは、プログラムの土台となるものです。

ソフトウェアの世界では、アプリケーションソフトを開発する際に頻繁に必要とされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのこと。アプリケーションの雛型。開発にフレームワークを利用すると、独自に必要とされる部分だけを開発すれば済むため開発効率の向上が見込める。具体的なソフトウェアだけでなく、汎用的に適用できるプログラムの設計モデルや典型的な処理パターンなどを含めてフレームワークと呼ぶ場合もある。

中身は知らなくてもその使い方さえ知っていればなんとか使えます。
jquery.jsについては私の愛読ニュースサイトGIGAZINEでも紹介されていました。
いろいろな効果を追加できるJavaScriptライブラリ「jQuery」 - GIGAZINE

jquery.js以外に、JavaScriptのフレームワークとして有名なのが、「prototype.js」
私もプログラムは全くと言っていいほど知らないのですが、それでもなんとか使えています。

個人的には、CSSでロールオーバーをしたい派なのですが、IEの問題があるので、仕事で使う場合は全てJavaScriptを使用しています。
どちらがいいのかは難しいところですが・・・

追記：2007/6/21
CSS HappyLifeさんのところで同様のJavaScript形式ロールオーバーのソースが公開されました。これはライブラリを使用せず、すっきりシンプルなものになっています。

ロールオーバー｜CSS HappyLife

追記：2007/10/30
ライブラリを使用しないものであれば、こんなのもあった。こちらは有名どころっぽい。

Daniel Nolan - Home

投稿日:2007年2月 2日 | 編集

« 前の記事 | webコラムのトップへ | 次の記事 »

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。