2

イメージのロールオーバー状態を作成するためにグローバルに使用できる関数を作成しようとしています。基本的に、画像にクラスを追加できるようにしたいのですが、それをロールオーバーすると、jquery は同じ画像名と同じ拡張子を使用しますが、ファイル名に「-over」を追加します。(-over を除いて、ロールオーバーされていない状態と同じ名前のロールオーバー状態のイメージがあります。これを思いつきましたが、機能していません。それを行うより良い方法は？

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

画像：

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

ありがとう！

編集:ファイル時間に固有でなく、jpgだけでなく任意のファイルタイプを把握できるようにする方法はありますか?

私は使用しています：

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

そしてそれはうまくいっています

編集 2: アクティブな状態 (ボタンがクリックされているとき) を追加することはできますか?

4

4 に答える 4

3

分割と結合は意図したとおりに機能するはずです。それを img の src 属性に戻すだけで済みます。

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

また、任意の拡張機能で動作させたい場合は、次のような正規表現を使用できます。

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

正規表現は、ピリオドの後にpng, gif, jpg, or jpeg.

ソースから -over を削除すると、元の状態に戻すことができます。

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

このjQuery().hoverイベントは 2 つの関数を受け入れます。最初の関数はホバーを開始したときに呼び出され、2 番目の関数はホバーを終了したときに呼び出されます。

于 2011-01-03T18:53:13.343 に答える
1

結果に対して何もしていないだけです。この場合、 (いくつかの方法で実行できます) を設定srcしたい場合、最も効率的な例を次に示します (.split().join()メソッドを変更せずに):

$('.btn').hover(function(){
  this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
  this.src = this.src.split("Over.jpg").join(".jpg");
});
于 2011-01-03T18:53:53.453 に答える
0 
$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})
于 2011-01-03T18:54:10.193 に答える
0

純粋な CSS を使用してロールオーバー効果を実現することを検討することをお勧めします。画像のロールオーバーのような些細なことにスクリプトを含める必要はありません。さらに、純粋な CSS アプローチは、スクリプトをオフにしてブラウジングする偏執狂に対しても機能します。

:hoverおよび疑似クラスを使用し、CSS スプライト:activeを活用します。

ここでの欠点は、事前に画像のサイズを知る必要があるため、この方法を一般的に適用するのが難しいことです.

于 2011-01-03T19:53:30.640 に答える