MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > Java script > 「smartrollover.js」で簡単に画像のロールオーバーを実装【Java Script】


「smartrollover.js」で簡単に画像のロールオーバーを実装【Java Script】

 2012年12月3日   タグ: ,

「smartrollover.js」で簡単に画像のロールオーバーを実装【Java Script】
ウェブサイトのメニューボタンなど画像のロールオーバーを簡単に実現する「smartrollover.js」というJava Scriptを紹介します。

smartrollover.js の使い方

headタグ内に外部ファイルとして読み込む

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

smartrollover.js のコード

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);
}

コードのハイライト部分(9行目、12行目)をご覧ください。

画像名の一番最後が「_off」という画像にロールオーバーしたときに「_on」という画像を表示します。

例えば、「menu01_off.gif」にロールオーバーすると「menu01_on.gif」が表示されます。

HTMLに画像を表示する

先の例のように「menu01_off.gif」をロールオーバーさせたい時は、imgタグで「menu01_off.gif」を挿入するだけです。

<img src="img/menu01_off.gif" alt="" />

たったこれだけで、画像のロールオーバーが実装できます。

このエントリーをはてなブックマークに追加

  |  Blog TOP   |