最もシンプルにロールオーバー（マウスオーバー）による画像差し替えを実現する件

ロールオーバー（マウスオーバー）とは、画像にマウスを乗せると画像が変わるアレの事なのですが。

実現するためには、通常javascriptをhtml内に記述しなければなりません。

ホームページ作成ソフトで有名な dreamweaverなども、一応マウス操作で簡単にロールオーバーを実装できるようになっていますが、行っていることは、やはりjavascriptの記述です。まあ、これをあまり意識しなくても実装できるのがこういったソフトの利点でもあります。

しかし、記述されたソースを見ると、結構長ったらしく見辛かったりします。

そこで、今回ご紹介する方法です。
この方法だと恐らく、もっともシンプルにHTML部分の記述を行う事が出来ると思います。

まずはjavascriptの準備です。
以下の内容をメモ帳などに貼り付け保存してください。

あぁ、HTML部分にjavascriptの記述は行いませんが、やはり実現するためにはjavascriptは必須です。
なので、今回はこれを外部ファイルに持たせます。よくわからない方は、とりあえず無視して最後まで読んで試してみてください。

function smartRollover() {  
    if(document.getElementsByTagName) {  
        var images = document.getElementsByTagName("img");  
        for(var i=0; i < images.length; i++) {  
            if(images[i].getAttribute("src").match("_off."))  
            {  
                images[i].onmouseover = function() {  
                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));  
                }  
                images[i].onmouseout = function() {  
                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));  
                }  
            }  
        }  
    }  
}  
if(window.addEventListener) {  
    window.addEventListener("load", smartRollover, false);  
}  
else if(window.attachEvent) {  
    window.attachEvent("onload", smartRollover);  
}  

このソースを今回はsmartRollover.jsという名前で保存します。

保存したら、今度はページに、このファイルを読み込むための記述を行います。

<script type="text/javascript" src="js/smartRollover.js"></script>

↑この記述はページのhead内に記載してください。
ここまでで、ロールオーバーを超簡単にHTMLに記述する準備ができました。

そう、これはあくまで準備なのです！ｗ
と言っても一度設置してしまえば後は楽ちんですので。

今回サンプル的に以下の2つの画像があります。

　　　

紛らわしいですが、「chick_off.jpg」が左側のヒヨコ、「chick_on.jpg」が鶏の画像となります。

通常の画面で、ヒヨコを表示させロールオーバー時に鶏の画像に切り替えたい場合、本来であればjavascriptを絡めてごちゃごちゃとしたコードを書かなければなりませんが、smartRolloverを使うとたった一行、しかも一枚の画像を表示させるためのソースで実現できてしまいます！

ソースはズバリ以下の通り！

「はぁ？」

と思われるかもしれませんがこれで実現できてしまうのです。


その秘密は、ファイル名にあります。
普通に表示したい画像ファイル名をhogehoge_off.jpgとします。

このファイル名の次にくる、「_off」アンダーバー＋offという記述が重要。
これで、通常表示と外部に置いたsmartRollover.jsが認識します。

そしてロールオーバー時の画像は同じファイル名の後に、今度は_on(アンダーバー＋on)と記述します。

これで、マウスが乗った際の画像を認識してくれます。

最初は外部ファイルの設置等、少々面倒かもしれませんが、一度設置してしまえばアップする画像のファイル名に_off/_onを記述するだけなので、実はとても楽にロールオーバーの設置ができます。

また、ソースも綺麗に仕上げることができるので一石二鳥ではないでしょうか？

シンプルソースがお好きな方は是非一度試してみてください！

※注意：当然_off/_onは同一ファイル名でなければ動きません。同一というのは、hogehoge_off.jpgであれば、_onにする画像も名称はhogehogeにしてください。

イラストでよくわかるJavaScript Ajax・jQuery・HTML5/CSS3のキホン イラスト：めじろまち 参考価格：¥1,890 価格：¥1,890