THE HAM MEDIA BLOG

jQuery:ロールオーバー画像をクリックで固定させる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
画像

ロールオーバー画像をクリックで固定させる

jQueryを使うとロールオーバーとかも楽に設定できるし、
先日のように、クリックで背景を変更することも可能だ。

今日はロールオーバー部分でクリックしたとき、
クリックした部分の画像は、ロールオーバー時のままにしておきたい、
そのままの状態にしておくようにするスクリプトにしてみた。



クリックで背景画像を入れ替える その2

先日の背景画像を入れ替えるで作ったのを改良してみた。

■スクリプト

(function($) {
  $(function() {
    $.ham.bglink();
    $.ham.rollover();
  });
  $.ham = {
  画像&背景切り替え部分
  bglink: function(options) {
    var c = $.extend({
      imgSelector: 'ul li a img',
      linkSelector: 'ul li a',
      bgSelecter: 'div#content',
      postfix: '_on',
      selectImg:''
    }, options);
      //ノードの初期化 A
      $(c.imgSelector).each(function(){
        this.imgSrc = $(this).attr('src');
        this.onimgSrc = 
          this.imgSrc.replace(/(\.gif|\.jpg|\.png)$/, c.postfix+"$1");
      });
      //ノードの初期化 B
      $(c.linkSelector).each(function(){
        this.bgimgSrc = $(this).attr('href');
      });
      //画像置換
      $(c.imgSelector).click(function(){
        if (c.selectImg != '') {
          $('.selected').attr('src', c.selectImg);
          $('.selected').removeClass('selected');
        };
        $(this).attr('src',this.onimgSrc).addClass('selected');
        c.selectImg = this.imgSrc;
      });
      //背景画像置換
      $(c.linkSelector).click(function(){
        $(c.bgSelecter)
          .css("background-image","url("+this.bgimgSrc+")");
        return false;
      });
  },
  //ロールオーバー部分
  rollover: function(options){
    var c = $.extend({
      hoverSelector: 'ul li a img',
      notHoverSelector: 'ul li a img.selected',
      postfix: '_on'
    }, options);
    //ノードの初期化
    $(c.hoverSelector).each(function(){
      this.originalSrc = $(this).attr('src');
      this.rolloverSrc = 
        this.originalSrc.replace(/(\.gif|\.jpg|\.png)$/, c.postfix+"$1");
    });
    //ロールオーバー
      $(c.hoverSelector).hover(function(){
        $(this).not('.selected').attr('src',this.rolloverSrc);
      },function(){
        $(this).not('.selected').attr('src',this.originalSrc);
      });
  }
  };
})(jQuery);

デモを見る

今回もプラグインの作り方で作ってみた。
ロールオーバー部分はyuga.jsとほぼ同じ作りです。

ソースだけを見るとなんともないのですけど、
実は結構作るのが大変だったりする。

クリックして画像をロールオーバー画像に変更するのは簡単だったのですが、
その後の処理を考えるのに苦労した。
単に技術がないだけなのですけどね・・・
その後の処理というのは、クリックして変更された画像を
他の画像がクリックされたときに元に戻すという処理。

クリックした箇所とかの変更などは、
thisを使って勘単に指定できるのですが、
そうじゃない部分はthisが使えないので、
それ用の指定が必要だったりする。

クリックした箇所にclassをつけるのはすぐに浮かんだのですが、
その後他の画像をクリックした時に
そのclassをつけた部分のurlを元に戻すのにどうするのか悩んだ。
最初はロールオーバー画像の_onになっている部分を削除しようとしたのですが、
それの指定の仕方がよくわからず断念。

結局クリックした部分の変更前のsrcを変数に格納しておいて、
他をクリックしたときに、まずその変数を変更後のsrcと入れ替えることにした。
そうすることで画像を元に戻すことに成功。
処理を考えるってのは結構大変かなとか思った。
・・・単に発想力がないのかもしれないですけどね。

とりあえず今回は完成ということで!



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。