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