通过单击 CSS 类触发 JavaScript，但我需要它从 HTML map 区域热点触发？

Question

我是 JavaScript 的新手，只复制/粘贴了一些现成代码的实现。但这对我没有帮助。 :-(

所以我找到了一个非常简洁的 jQuery“页面转换”教程，在开始时将 body display css 标签设置为“None”，然后做一个简洁的 Little fade in。

还有一个淡出功能，但在本教程中只有单击具有特定类的链接时才会触发。

但是:我需要在单击 HTML map 热点后发生淡出 - 我认为这些不能应用 css 类。

必须有一种方法可以从这个 HTML map 区域热点调用淡出功能，是吗？如果是这样，该函数是否仍然能够获取目标 URL？

这将是脚本:

<script type="text/javascript">
$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(500);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(500, redirectPage);       
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});
</script>

所以这就像一个魅力:

<a href="page2.html" class="transition">Click to fade to Page 2</a>

但是我要用这个做什么？

<img src="graphics/menu_01.jpg" alt="" usemap="#maincontent" id="maincontent"/>
<map name="maincontent">
  <area shape="rect" coords="438,264,578,411" href="page2.html">
</map>

非常感谢!

Answer 1

1. 将 transition 类添加到您的 area 元素。
2. 将您的选择器更改为这个:$(".transition")。

JSFiddle Demo