KH-WEBLOG TOP > WEBメモ > JavaScript > ロールオーバー処理:javascript

ロールオーバー処理:javascript

最終更新日:

javascriptで個人的によく使う
画像のロールオーバーのやり方が2通りあるのでメモ。

コーディング・WordPress化作業を代行します

1.IMGタグ内に直接記述する方法

このやり方は簡単♪
imgタグの中に

<a href="#">
<img src="images/btn.jpg" onmouseover="this .src='images/btn_on.jpg'" onmouseout="this .src='images/btn.jpg'"/>
</a>

のように
onmouseover=”this .src=’ロールオーバー時の画像URL‘”
onmouseout=”this .src=’ロールアウト時の画像URL‘”
を記述すればOK。
このやり方の一番良い点は画像名がなんでも良いところです。

2.外部javascriptに記述する方法

サンプル
まず、

function xRollover() {
	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", xRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", xRollover);
}

というソースを記述したjavascriptのファイルを用意(roll_over.js)し、
HTMLのHEAD内に

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

のようにroll_over.jsを読み込めば準備完了!

あとはロールオーバーさせたい画像のファイル名を
btn_off ・・・ロールアウト時のファイル名には~_offを付ける
btn_on ・・・ロールオーバー時のファイル名には~_onを付ける
などにし、

<a href="#"><img src="images/btn_off.jpg" /></a>

と記述すればOK。
※_on、_offの名前はroll_over.js内で変更可能

このやり方の良い点は、ソースがシンプルになるところです。
※注意点として、必ず画像名_on、画像名_offという名前(画像名は共通)で同じディレクトリにファイルを保存する必要があります。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/16 21:14時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事