[JavaScript][授業]画像置換（2） - 実践するWEBサイト制作

ライブラリを利用

rollover.js

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像置換[ rolloverの使用 ]</title>

<link rel="stylesheet" href="css/style.css" media="screen,print">

<script src="js/rollover.js"></script>

</head>
<body>


<nav>
<ul>
<li><a href="#"><img src="images/btn01.gif" alt="HOME" width="160" height="50" class="imgover"></a></li>


<li><a href="#"><img src="images/btn02.gif" alt="HTML+CSS" width="160" height="50" class="imgover"></a></li>


<li><a href="#"><img src="images/btn03.gif" alt="JavaScript" width="160" height="50" class="imgover"></a></li>


<li><a href="#"><img src="images/btn04.gif" alt="ActionScript" width="160" height="50" class="imgover"></a></li>


<li><a href="#"><img src="images/btn05.gif" alt="PHP" width="160" height="50" class="imgover"></a></li>
</ul>
</nav>


</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";


/* reset */

html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,ul,ol,li,dl,dt,dd,table,th,td,from,fieldset {
	
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family:
      "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro",
      "Hiragino Kaku Gothic Pro W3",
      "メイリオ",
      meiryo,
      Osaka,
      "ＭＳ Ｐゴシック",
      "MS PGhothic",
      sans-serif;
    }

ul,ol {
    list-style-type: none;
    }

a {
    text-decoration: none;
    }

img {
    border: 0;
    }



/* ====================nav
 */

nav {
    width: 800px;
    margin: 50px 0 0 50px;
    background-color: #FF0;
    }

ul {
    overflow: hidden;/* nav枠内に入れる */
    }

li{
    float: left;
    display: inline;
    }

ソースコード【 JavaScript[ rollover ] 】

/*
	Standards Compliant Rollover Script
	Author : Daniel Nolan
	http://www.bleedingego.co.uk/webdev.php
*/

function initRollovers() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'imgover') {
			var src = aImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
				sTempSrc = this.getAttribute('src');
				this.setAttribute('src', this.getAttribute('hsrc'));
			}	
			
			aImages[i].onmouseout = function() {
				if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
				this.setAttribute('src', sTempSrc);
			}
		}
	}
}

window.onload = initRollovers;

ブラウザで表示