WISS inc.

マウスオーバーのイメージを差し替える（rollover）

core. ロールオーバーの画像差し替え機能。よく使いそうなので考えてみました。

これもよく使われる機能ですので、Dojoを使ってシンプルなものを作ってみます。基本的なスクリプトの仕様は最もシンプルで快適なDaniel Nolan氏作のものを参考にしました。

<img src=".../rollover.gif"
      alt="Some Image" class="imgover" />
<script type="text/javascript">
dojo.addOnLoad(rollover);
function rollover(opts) {
  var settings = { hoverclass:'imgover',suffix:'_o' };
  if (opts) for (var k in opts) settings[k] = opts[k];
  //対象クラスすべてに処理
  dojo.query("img."+settings.hoverclass).forEach(
    function(el){
      var src = el.getAttribute('src');
      el.setAttribute('osrc', src);
      var hsrc = src.replace(/(\.gif|\.jpg|\.png)/,
          settings.suffix+"$1");
      el.setAttribute('hsrc', hsrc);
      //preload
      var temp = new Image();
      temp.src = hsrc;
      dojo.connect(el,"onmouseover",function(){
      el.setAttribute('src', el.getAttribute('hsrc'));
      });
      dojo.connect(el,"onmouseout",function(){
      el.setAttribute('src', el.getAttribute('osrc'));
      });
    }
  );
}
</script>