3

私はフォトギャラリーを構築していますが、私がやりたいのは、ユーザーが画像をロールオーバーすると (この質問の目的のために、リンゴの写真だとしましょう)、リンゴの他のすべての画像が表示されるようにすることですページには「オーバー」状態も表示されます。

すべての助けをいただければ幸いです。事前にお時間をいただきありがとうございます。

4

4 に答える 4

5

画像の「タイプ」をクラスとして追加できます。たとえば、リンゴは次のようになります。

<img src='' class='apple fruit red' />

スペースで区切られたクラスはいくつでも持つことができます。

次に、次のハンドラーを追加します。

$(".apple").mouseover(function() {
   $(".apple").addClass("overState");
});

CSS で overState を定義する必要があります。マウスアウトでは、クラスを削除する必要があります。

于 2008-12-18T06:47:21.847 に答える
1

つまり、各画像にはいくつかのタグ（「リンゴ」、「赤」、「大きな」など）があり、大きな赤いリンゴの上にマウスを置くと、他のすべてのリンゴ、大きなもの、赤いものが点灯しますか？

kgiannakakisが提案したように、私はそのデータを画像のクラス属性に入れます-唯一の違いは、ページ上の他のクラスと衝突しないように、各クラスの前に何かを付けることです。

<img src="the-big-red-apple.jpg" class="tagged tag-big tag-red tag-apple" />

また、「タグ付き」と呼ばれるクラスを追加したので、ナビゲーション画像などからタグ付きの写真を区別できます。

$('img.tagged')
    .each(function() {
        var thisClasses = this.className.split(/s+/); // array of classes.
        var search = [];
        for (var i = 0; i < thisClasses.length; ++i) {
            if (thisClasses[i].substr(0, 4) == "tag-") {
                search.push("." + thisClasses[i]);
            }
        }
        $(this).data("tags", search.join(","));  // ".tag-big,.tag-red,.tag-apple"
    })
    .hover(function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .addClass("highlight")
        ;
    }, function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .removeClass("highlight")
        ;
    })
;

これが行うことは、最初にすべてのタグ付けされた画像をループし、それぞれのタグが何であるかを調べ、それをその要素のdata（）に格納することです。これは、毎回ではなく、一度だけ行う必要があることを意味します。

次に、タグ付けされた各画像にホバーイベントを追加して、この画像のタグのいずれかに一致するものを見つけ、「ハイライト」クラスを追加します。同様に、マウスアウトするとクラスが削除されます。

于 2008-12-19T07:24:47.853 に答える
0

画像ソースを変更する

このメソッドは、単にクラスを適用するのではなく、イメージ ソースを実際に均一な方法で変更します。

function swapImageGroup(imgSelector,suffix){
if (suffix == null) {suffix = "-hover";}
//imgSelector is the jQuery selector to use
//both imgSelector and suffix must be strings
$(selector).hover(
   function() {
      $(selector).each(function(){
      //store ".jpg" or ".png" or whatever as fileExtension
      var fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf("."));
      //replace something like ".jpg" with something like "-hover.jpg",
      //assuming suffix == "-hover"
      $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix + fileExtension));
    });
    },
    function() {
      $(selector).each(function(){
      //chop off the end of the filename, starting at "-hover" (or whatever)
      //and put the original extension back on
      $(this).attr("src", $(this).attr("src").split(suffix + ".").join("."));
      });
    }
);
}

したがって、次のように関数を使用します。

swapImageGroup("img.apple");

また

swapImageGroup("img.foo","-active");
于 2008-12-19T22:09:08.983 に答える
0

これらがリンク (アンカー タグ) である場合、これを行うために jQuery は必要ありません。CSS で :hover を使用できます。

a.apple:hover img {
  /* whatever you want to change here */
}

編集：私を無視してください。これにより、ページ上のすべてのリンゴ要素が同時に変更されるわけではありません。それは、私が眠い夜遅くにSOを熟読することで得られるものです.

于 2008-12-18T08:42:46.510 に答える