[JS]ロールオーバースクリプト(ソース変更なし)

HTML側の変更なしで、メニュー内の画像を全部ロールオーバーさせるスクリプトを作ってみた。
relにしろclassにしろイベントハンドラにしろ、ロールオーバーさせるためだけに追加するのは嫌、という時に良いかも。

ID#menu内にあるアンカーを全て取得し、その長子要素であるimgのsrcを操作するというものです。

<div id="menu">
<ul>
<li><a href="index.html"><img src="images/menu/01.png" /></a></li>
<li><a href="menu2.html"><img src="images/menu/02.png" /></a></li>
<li><a href="menu3.html"><img src="images/menu/03.png" /></a></li>
</ul>
</div>

マウスオーバーするとこうなる▼

<li><a href="index.html"><img src="images/menu/on_01.png" /></a></li>

window.onload = function() {
if (document.getElementsByTagName) {
var dir =”images/menu/”; //画像のディレクトリ
var strOver = RegExp(“on\_”);
var myMenu = document.getElementById(“menu”).getElementsByTagName(“a”);
for (var i = 0; i

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください