Webtech Walker

iPhoneとかでタップしたときに画像切り替えるjQuery Plugin

を書いた。タップしたときに_oとかがついてる画像に切り替えるという、画像のロールオーバーとほとんど同じです。それだけです。

// iPhoneとかでtap時に画像を切り替える
// demo: http://dl.dropbox.com/u/336104/demo/iphone_tap/index.html
// Usage: 
// $('.btn').tapactive();

$.fn.tapactive = function(opt) {
  opt = $.extend({
    suffix: "_o"
  }, opt);

  return this.each(function() {
    var $elem = $(this);

    var src = $elem.attr("src");
    var src_o = src.replace(/(.*)\.(.*)$/, "$1" + opt.suffix + ".$2");
    (new Image).src = src_o;
    $elem.bind("mousedown touchstart", function() {
        $elem.attr("src", src_o);
    });
    $elem.bind("mouseup touchend", function() {
      $elem.attr("src", src);
    });
  });
};
このエントリーをはてなブックマークに追加