php - 图像突出显示

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