_on _offと画像ファイル名だけ変えればよいJavascriptロールオーバー
_on _offと画像ファイル名だけ変えればよいJavascriptロールオーバー
http://blog.loaferz.com/
このサイトを参考に、自分もやってみました。
とっても簡単に出来るからラクチン！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssreset/cssreset-min.css">
<script type="text/javascript" src="smartRollover.js"></script>
<title>ソースがシンプルなJSによるロールオーバー</title>
</head>
<body>
<p>
<img src="home_off.gif" alt="home" width="100" height="20">
<img src="about_off.gif" alt="about" width="100" height="20">
<img src="gallery_off.gif" alt="gallery" width="100" height="20">
<img src="diary_off.gif" alt="gallery" width="100" height="20">
<img src="link_off.gif" alt="gallery" width="100" height="20">
</p>
</body>
</html>
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);
}
http://www6.ocn.ne.jp/~yokotchi/blog/sample07/index.html
