汎用マウスオーバースクリプト・改

　もちろん、マウスオーバーにはCSSだけを使った方法があることは知っております。一時はその方向でコーディングしたりもしてました。

　ただ、「メニューの文字はテキスト、テキストの乗っている背景だけは画像で」という場合はCSS使用があってると思うんだけど、文字も含めて全部画像で行う場合は、結局CSS側で画像をdesplay:noneしてたりして、な〜んか「裏技」感を拭いきれなかったんですよ。スッゲー美人にキスしようとして近づいてったら鼻毛が出てたみたいな。違いますか。そうですね、裏技じゃないですね、それ。

　でまあ、最近「JavaScriptをONにしている人は、そういう効果も含めて楽しみたいと思っている、そうじゃないヒトにはストイックな画面を提供すればオッケー」という考え方になってきたのですね。「HTML=構造と内容」「CSS=構造を判りやすくするためのデザイン」「JavaScript=内容と構造を楽しむための効果」と振り分ける考えに至ったわけです。

　そーゆー思考回路からいって、方策としては「menuというID内の画像には一括してJavaScriptでマウスオーバー効果を貼り付ける」のが一番ラクチンで的確はないかと思ったわけですよ。

　で、あちこちごにょごにょして出来上がったのが、以下のコードです。

///////////////メニュー一括マウスオーバー設定///////////////
//windowにonloadイベントハンドラーを追加
  eval(window.onload=onLoadEve)
//ページ読み込み時の動作
  function onLoadEve(){
  var d=document.getElementById("menu").getElementsByTagName("img");
  for(i=0;i<d.length;i++){
//ID(menu)内のIMG要素にmouseover,mouseoutイベントハンドラーを追加
  eval(d[i].onmouseover=onMouseOverEve)
  eval(d[i].onmouseout=onMouseOutEve)
  }
  }
//IMG要素をマウスオーバーした時の動作
  function onMouseOverEve(){
  var imgs = this.src.substring(this.src.lastIndexOf('/')+1,this.src.length);
//画像がOver(_f3)でなければ画像を_f2に変更する
  if(imgs.substring(0,imgs.lastIndexOf('.')).match(/(_f3?|\/)$/)==null){
  moImage = new Image();
  moImage.src=this.src.substring(0,this.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('.'))+"_f2"+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
  this.src = moImage.src;
  }else{
  }
  }
//IMG要素をマウスアウトした時の動作
  function onMouseOutEve(){
  var imgs = this.src.substring(this.src.lastIndexOf('/')+1,this.src.length);
 //画像を変更する
  if(imgs.substring(0,imgs.lastIndexOf('.')).match(/(_f3?|\/)$/)==null){
  this.src = this.src.substring(0,this.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('_f2.'))+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
  }else{
  }
  }
////////////////////////////////////////////////////////////

　これを記述したjsファイルをどこかで（できればHTMLファイルの末尾で）読み込んであげれば、それだけで「menu」というID内にあるxx_f3.xxではない*1画像はすべてマウスオーバーで「xx_f2.xx」という画像を表示させるようになります。*2

　サンプルはこんな感じ。

　これでもう、メニューのマウスオーバーごときにHTMLを汚されなくてすむわけですね。わーい、スッキリした〜。←自己完結

• *1: つまり、現在のページをあらわす画像だけをxx_f3.xxという名称の画像に変更しておくわけですね。
• *2: もし、menuIDの中にメニューではない画像が含まれる場合は、その名前をxx_f3.xxにするか、もしくは「menuの中のaタグの中のimgタグ」と指定を買えてやればよさそうな気がします。その前にmenuの中にメニューではない画像が含まれることがダメのような気はしますが。