2

構築しているサイトのJqueryで画像切り替え機能を使用しています。たくさんのプロジェクトがあるので、私はこれらの画像の多くを大幅に圧縮しています。ただし、それらの一部は.gifとして見栄えがよくなく、実際には.jpgを作成することだけが意味があります。

私の問題は、このコードが1つの画像を、名前は異なるがプレフィックスが類似している別の画像にのみスワップすることです。ファイルの名前だけを交換する方法はありますか？.gifまたは.jpgがある場合、名前を_staticから_rolloverに交換するだけなので、問題はありませんか？

これが私が使用しているコードです：

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_static.")[0];
                    $(this).attr({src: "" + origin + "_rollover.gif"});
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_rollover.")[0];
                    $(this).attr({src: "" + origin + "_static.gif"});
            });
});

および画像スイッチのHTML

<div class="projectThumb">
    <img src="/img/mr_button_static.gif" class="button" name="mr">
    <p class="title">Title &ndash; Poster</p>
</div>

切り替える画像の名前は/img/mr_button_rollover.jpg

ありがとう！

4

1 に答える 1

2

文字列置換を使用して、イメージ名の静的とロールオーバーを切り替えるだけです。

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var rollover = iconName.replace( /static/, 'rollover' );
                    $(this).attr({ src: rollover });
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var static = iconName.replace( /rollover/, 'static' );
                    $(this).attr({ src: static });
            });
});

画像プレフィックスで静的/ロールオーバーできる可能性がある場合は、検索にアンダースコアを含めて文字列を置換し、ファイル拡張子の前のドットを一致/置換します。

于 2009-09-06T15:01:04.800 に答える