JavaScriptでロールオーバー
下記のJavaScriptファイルを用意します。
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); }
「smartRollover.js」で保存し、外部ファイルとして読み込みます。(記述する場所は、head要素内)
<script type="text/javascript" src="smartRollover.js"></script>
通常時の画像と、ロールオーバー時の画像を別々で用意し、ファイル名の最後に「_on」、「_off」と付けます。
「_off」の画像を指定します。
<a href="..."><img src="画像ファイル名_off.gif" alt="..." /></a>
「画像ファイル名_off.gif」が、「画像ファイル名_on.gif」に入れ替わる仕組みです。 サンプルは「gif」ですが、「jpg」や、「png」でも可能です。