NucleusのShowBlogsとかでマウスオーバー時に画像の切り替えする

ShowBlogsやDisplayCommentsの「次の10件」などのナビゲーションを画像にし、なおかつマウスオーバー対応するにはソース書き換えないとできない。でもJavaScriptで切り替えようと思ったらラベルを出力してるところをそのまま書き換えるだけでは工夫がいる。

JavaScriptでの画像切り替えはID指定するのが一般的。でも、そうすると同じIDが複数あった時に正しく動かない。ShowBlogsでナビゲーション部分を２回出力しようと思ったらそれぞれ別のIDを振らないといけないわけだけど、その部分が常に固定されているのでどうしても同じIDが複数存在してしまう。

そこで、マウスオーバーで画像切り替える時はだいたい、a要素の直下にimg要素がひとつだけくるので、これを自動で識別してやればいい。

function swap(e,src){
  var back;
  for (var i=0; i<e.childNodes.length;i++){
    var c = e.childNodes[i];
    if (c.tagName=='IMG'){
      back = c.src;
      c.src=src;
      break;
    }
  }
  e.onmouseout = function(){
    return swap(e, back);
  }
}
</script>
<a href="#" onmouseover="swap(this,'over.gif')">
  <img src="base.gif" alt="sss" />
</a>

onmouseoutで同じ画像ファイル指定してるから、これはもっと簡単にもできそうな気がする。

それか画像の切り替えはCSSでもできるから、それでやる手もある。