例のあれ（仮題）

むしろ一昨日参ります。

とっぷ > entry > jQueryでロールオーバー。

jQueryでロールオーバー。 - 2008/8/31 (日) p.m.05:33 - ▼

　作った物はどんなに~~しょぼい~~些細な物でも垂れ流す！

　当ページでは時代的な物もありましたけどもprototype.jsを使っているのですが、個人的に最近はjQueryであります。先日公式サイトが派手なデザインへ変更されておりましたね。

　それはさておき、先日画像がロールオーバーするあれなJavaScriptを書いてみたのでここに。ググって色々なところを参考にして拝借した結果であります。

$(function() {
  $("img.rollover")
    .each(function() {
      var baseImage = $(this).attr("src");
      var ext = baseImage.substring(baseImage.lastIndexOf('.'), baseImage.length);
      var overImage = baseImage.replace(ext, '_over' + ext);
      new Image().src = overImage;
      $(this).attr({basesrc: baseImage, oversrc: overImage});
    })
    .hover(function() {
        $(this).attr({src: $(this).attr("oversrc")});
      },
      function() {
        $(this).attr({src: $(this).attr("basesrc")});
    }
  );
});

　な内容のjsファイルを拵えてjquery.jsと一緒に読み込んでおいて、

　とimgタグ内でクラス名にrollovreと設定。そして、差し替える用画像ファイルを「元の画像_over.gif」みたいに_overを追加したファイル名で元の画像と同じところへ保存しておけばOK。クラス名とか差し替える用画像とのファイル名の差異とかは適当に適当にするとよいと思う。

　クラス名がrolloverであるimgタグにそれぞれ、属性srcからファイル名を取り出して、それから拡張子を取り出して、差し替える用の画像ファイル名を拵えて、二つの属性を作ってそれぞれに入れておくという処理を実行。次に、hover()メソッドで実行する処理を設定しておく。この場合はhover時には属性oversrcから取り出したファイル名を属性srcへ設定、out時には属性basesrcから取り出したファイル名を属性srcへ設定している。
　てのが簡単な処理の流れ。

たぐ - javascript