ラクチンロールオーバー
外部ファイルと画像を設定しておけば、プリロードからロールオーバーまでを簡単にできるもの。
jsをリンクしておけば、classを設定するだけで良いので、とてもお手軽です。
画像の用意
オールアウト画像 ○○.gif、○○.jpg
ロールオーバー画像 ○○_o.gif ○○_o.jpg
外部ファイル
/*rollover script by two-ways*/
/*coryright(c)two-ways co.Ltd All rights reserved*/
/*2008.05 ver3.0*/
window.onload=LoadEvent;
function LoadEvent(){
prImg= new Array();
for (i=0; i
baseIMG = document.images[i].src;
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
prImg[i] = new Image();
prImg[i].src = newIMG;
document.images[i].setAttribute("onmouseover", "Over("+i+")");
document.images[i].setAttribute("onmouseout", "Out("+i+")");
}else if(document.images[i].getAttribute("className")=="over"){
baseIMG = document.images[i].src;
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
prImg[i] = new Image();
prImg[i].src = newIMG;
document.images[i].setAttribute("onmouseover", new Function("Over("+i+");"));
document.images[i].setAttribute("onmouseout", new Function("Out("+i+");"));
}
}
//newwin
for (k=0; k
document.links[k].setAttribute("onclick", "OpenWin()");
document.links[k].target = windowname;
}else if(document.links[k].getAttribute("className")=="largeimage"){
document.links[k].setAttribute("onclick", new Function("OpenWin();"));
document.links[k].target = windowname;
}
}
}
function Over(IMG){//mouseover
baseIMG = document.images[IMG].src;
if(baseIMG.substr(baseIMG.length-6,2) !="_o"){
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-4,4),("_o" + baseIMG.substr(baseIMG.length-4,4)));
document.images[IMG].src=newIMG;
}
}
function Out(IMG){//mouseout
baseIMG = document.images[IMG].src;
if(baseIMG.substr(baseIMG.length-6,2) =="_o"){
newIMG = baseIMG.replace(baseIMG.substr(baseIMG.length-6,6),baseIMG.substr(baseIMG.length-4,4));
document.images[IMG].src=newIMG;
}
}
HTMLファイル
<head>内
外部ファイルの読み込み
<script type="text/javascript" src="../menu.js"></script>
<body>内
画像にclass=overをつけるだけ。
<img src="***.gif" alt="***" width="**" height="**" class="over" />
idのついている画像に対して、最後の4文字（例えば、○○.gif）を「_o」のついたもの（例えば、○○_o.gif）に変換する。
コメントする