jQuery：ロールオーバー画像をクリックで固定させる
jQueryを使うとロールオーバーとかも楽に設定できるし、
先日のように、クリックで背景を変更することも可能だ。
今日はロールオーバー部分でクリックしたとき、
クリックした部分の画像は、ロールオーバー時のままにしておきたい、
そのままの状態にしておくようにするスクリプトにしてみた。
クリックで背景画像を入れ替える その２
先日の背景画像を入れ替えるで作ったのを改良してみた。
■スクリプト
(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と入れ替えることにした。
そうすることで画像を元に戻すことに成功。
処理を考えるってのは結構大変かなとか思った。
・・・単に発想力がないのかもしれないですけどね。
とりあえず今回は完成ということで！
