0

助けが必要な問題があります。

jQuery を使用してマウスオーバー アニメーションを作成しようとしています。これにより、ユーザーが画像にカーソルを合わせると、強調表示されたバージョンの画像が表示されます。CSSでこれを行うことができることはわかっていますが、問題はコンテンツを管理する必要があることです。そこで、画像ファイル名の一部に一致する関数を作成し、残りのファイル名にワイルドカードを使用したいと考えました。

HTML は次のとおりです。これは、ユーザーが画像にカーソルを合わせない限り、常に表示される画像です。

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/bgr_img.jpg' ?>" alt="First Image" />

ユーザーが画像にカーソルを合わせると、src を変更したいと思います。

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ?>" alt="First Image" />

mouseout で、src を以前の状態 "bgr_image.jpg" に戻したい

これは私が現在使用しているjQueryです：

$(function() {
    $(".imgPath")
        .mouseover(function() { 
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg");
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg");
            $(this).attr("src", src);
        });
});

今画像にカーソルを合わせると、src が「null」に変わります。ドメインを含まないパス名を使用しようとしましたが、同じ値が返されます。

助けていただければ幸いです。

4

3 に答える 3

1

src を一致させたり、置き換えたりするのはなぜですか? 変更するだけです：

$(function() { 
    $(".imgPath").hover(
        function() { $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); },
        function() { $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); }
    ); 
});

編集：

match() は一致の配列を返します: [0] で src にアクセスします

$(function() { 
    $(".imgPath") 
        .mouseover(function() {  
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
            $(this).attr("src", src[0]); 
        }) 
        .mouseout(function() { 
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
            $(this).attr("src", src); 
        }); 
});

EDIT2：

<img class="imgPath" onmouseover="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

<script>
    function changeImgSrc(img, imgsrc) {
        $(img).attr('src', imgsrc);
    }
</script>

また：

<img class="imgPath" onmouseover="this.src = '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="this.src = '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />
于 2012-04-19T08:24:16.347 に答える
0

「一致」関数は、文字列ではなくブール値を返します（マウスオーバー関数で）

于 2012-04-19T08:23:07.237 に答える
0

このタスクでmatch()およびreplace()関数を使用する必要はありません

以下のようにしてください。

$(function() {
    $(".imgPath")
        .mouseover(function() { 

            $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");

        })
        .mouseout(function() {
            $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");

        });
});

編集:

複数の画像に対してこのようなシナリオがあるとします。

<div class="imgPath"><img src="1.jpg" /> </div>
<div class="imgPath"><img src="2.jpg"  /></div>
<div class="imgPath"><img src="3.jpg" /> </div>
<div class="imgPath"><img src="4.jpg"  /></div>

したがって、以下のコードでこれを管理できます。

$('.imgPath img').hover(
    function(){
        $('.imgPath img').each(
            function(){
                $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");
            });
    },
    function(){
        $('.imgPath img').each(
            function(){
              $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");
            });
    }

);

これでさらにお役に立てると思います。

ありがとう。

于 2012-04-19T08:32:07.700 に答える