圖像突出顯示

Question

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]; 
      }); 
     }); 

Answer 1

Zotal托特的答案應該工作，但是你應該考慮改變你的鼠標移開處理程序像這樣，除非你想要的形象改回來，一旦用戶懸停在它上面：

// 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]; 
} 

Answer 2

以下假定您的網頁命名爲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]); 
    } 
}