ロールオーバー処理：javascript
シェア
ツイート
最終更新日：
javascriptで個人的によく使う
画像のロールオーバーのやり方が２通りあるのでメモ。
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‘”
を記述すればＯＫ。
このやり方の一番良い点は画像名がなんでも良いところです。
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>
と記述すればＯＫ。
※_on、_offの名前はroll_over.js内で変更可能
このやり方の良い点は、ソースがシンプルになるところです。
※注意点として、必ず画像名_on、画像名_offという名前(画像名は共通)で同じディレクトリにファイルを保存する必要があります。
JavaScriptのおすすめ参考書
ポチップ
ポチップ
