0

Bergi（スタックオーバーフローユーザー）は、jQueryを使用した画像スワップのソリューションを思いつくのをとても親切に助けてくれました。今はホバーでスワップしますが、現在のサブサイトでハイライト表示されたままになるようにします（たとえば、[コミック]ページをクリックすると、[コミック]がハイライト表示されたままになります）。それは可能ですか？ありがとう！

    <script type="text/javascript">
        var images = {
            "comicssubsite": [
                "./images/SiteDesign/Comics_subsites_hover.png",
                "./images/SiteDesign/Comics_subsites.png"
            ],
            "artworksubsite": [
                "./images/SiteDesign/Artwork_subsites_hover.png",
                "./images/SiteDesign/Artwork_subsites.png"
            ],
            "aboutsubsite": [
                "./images/SiteDesign/About_subsites_hover.png",
                "./images/SiteDesign/About_subsites.png"
            ],
            "blog": [
                "./images/SiteDesign/Blog_othersites_hover.png",
                "./images/SiteDesign/Blog_othersites.png"
            ],
            "facebook": [
                "./images/SiteDesign/Facebook_othersites_hover.png",
                "./images/SiteDesign/Facebook_othersites.png"
            ]
        };

        jQuery(document).ready(function($) {
            $("#comicssubsite, #artworksubsite, #aboutsubsite, #blog, #facebook").hover(function(e) {
                 // mouseover handler
                 if (this.id in images) // check for key in map
                     this.src = images[this.id][0];
            }, function(e) {
                 // mouseout handler
                 if (this.id in images)
                     this.src = images[this.id][1];
            });
        });
4

2 に答える 2

2

Zotal Tothの答えは機能するはずですが、ユーザーが画像にカーソルを合わせたら、画像を元に戻したい場合を除いて、mouseout-handlerをそのように変更することを検討する必要があります。

// mouseout handler
var section = document.location.href.split("/")[url.split("/").length-1].split(".")[0];
if (this.id in images) {
   if this.id != section
       this.src = images[this.id][1];
}
于 2012-11-12T02:02:33.257 に答える
1

comicssubsite.*以下は、artworksubsite.*などという名前のページを想定しています。

var url = window.location.href;

for (key in images) {
    if ( url.indexOf( key ) > -1 ) {
        alert(key);

        // highlight your menu item
        $( "#" + key ).attr( "src", images[key][0] );
    }
}
于 2012-11-12T01:58:01.347 に答える