画像リンクのロールオーバーについて
- 投稿日 : 2007-10-12, 00:39（）
- タグ（Usability jQuery JavaScript CSS HTML）
- カテゴリ（Design）
- 記し人（luvsic）
- 閲覧数（513）
- test null 13
- test 1-3
- test 2-3
自分の中でいったん整理
- よくあるデメリット
- 毎回画像を呼ぶためサーバに負担
- ２種類画像を作るのが手間
- それ用のCSSコーディングが手間、煩雑になる場合も
- やり方によって生まれるメリット
- リンクなのがわかる ⇒ ユーザビリティアップ
- 異なるイメージを与えれる ⇒ デザインアップ
- CSSコーディングの手間が省ける、記述の統一化 ⇒ 開発力アップ
うーん。
こういう感じが楽なのだろう。
明るくなった感じにする場合
CSSでやっちゃう、html考えなくていい
a:hover.rollover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
これでaタグにrolloverのクラスをうってロールオーバ
違う画像ファイルへ切り替える場合
jQuerとjavascriptでやっちゃう
$.auto = {
init: function() {
for (module in $.auto) {
if ($.auto[module].init)
$.auto[module].init();
}
}
};
$(document).ready($.auto.init);
$.auto.hover = {
init: function() {
$('IMG.hover')
.bind('mouseover', this.enter)
.bind('mouseout', this.exit)
.each(this.preload);
},
preload: function() {
this.preloaded = new Image;
this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
},
enter: function() {
this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
},
exit: function() {
this.src = this.src.replace(/^(.+)_ro(\.[a-z]+)$/, "$1$2");
}
};
init: function() {
for (module in $.auto) {
if ($.auto[module].init)
$.auto[module].init();
}
}
};
$(document).ready($.auto.init);
$.auto.hover = {
init: function() {
$('IMG.hover')
.bind('mouseover', this.enter)
.bind('mouseout', this.exit)
.each(this.preload);
},
preload: function() {
this.preloaded = new Image;
this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
},
enter: function() {
this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
},
exit: function() {
this.src = this.src.replace(/^(.+)_ro(\.[a-z]+)$/, "$1$2");
}
};
これで、imgタグにhoverのクラスをうった画像はマウスオーバー時に自動的に「ファイル名_ro.拡張子」のファイルに切り替わる
うーん、このjavascript、どこのだっけ
jQueryを使用せずJavascriptだけでやる場合
px*blog | クラス名にblankを入れたらtarget=_blankになる
こういう感じが素敵かなと思います。
No comments yet