Question

我用mapper.js创建了一个区域地图，一切似乎都很好，直到我在同一区域放置一个事件（href或onclick）。我正在使用primefaces xhtml。

我遇到的问题是：

当我调用mapper.js时，链接停止工作，但“悬停”工作正常。
如果我没有打电话给“mapper.js”，那么链接工作正常，但显然悬停不起作用。

请告诉我，如何让“悬停”和“onclick / href”都正常工作......

这里有 index.xhtml 文件：

<ui:define name="content">
    <p:panelGrid columns="1"  style="display:block;" id="panel_home">
    <h:form id="department_form" style="display:none">
        <ui:repeat value="#{departamentsController.departments}" var="department" >
            <p:commandButton id="departmentButton" value="#{department.name}" oncomplete="PF('dialog').show();" styleClass="#{'department_'.concat(department.id)}" update="listFilesForm" actionListener="#{fileSearchController.filesByDepartment(department)}"/>
        </ui:repeat>
    </h:form>

    <h:graphicImage id="graphicImage1" ismap="true" styleClass="mapper iborder456c74 icolord76f47" url="/resources/images/mapa1.png" usemap="#map1" />
        <map name="map1" id="map1">
            <area href="JavaScript: document.getElementById('department_form:j_idt13:13:departmentButton').click();"  shape="poly" coords="434,166,438,162,439,158,445,148,450,137,456,134,458,126,461,121,466,120,470,119,476,121,493,89,505,85,515,82,526,80,536,73,547,63,539,47,529,44,524,42,522,40,517,40,514,41,514,45,510,45,509,43,507,46,503,48,502,46,498,49,501,52,499,55,494,58,492,57,492,53,485,52,484,54,483,59,483,64,477,76,467,81,453,85,444,88,436,95,423,103,418,106,410,113,394,115,390,122,389,128,388,136,392,140,398,139,406,139,412,141,410,148,413,150,418,146,421,149,423,153,423,159,420,165,419,169,427,165" />
            <area href="JavaScript: document.getElementById('department_form:j_idt13:14:departmentButton').click();" shape="poly" coords="371,260,377,254,369,244,368,239,363,232,357,227,365,222,373,220,375,221,377,218,366,198,360,188,369,172,376,170,384,167,390,163,395,163,393,158,391,152,392,148,390,143,388,139,394,113,386,114,378,113,372,111,368,107,361,107,358,110,353,115,352,120,352,123,349,132,344,142,342,146,335,145,334,142,327,142,327,139,333,137,333,131,328,126,318,124,316,126,318,131,319,141,320,150,320,158,315,163,310,170,308,176,305,182,305,186,312,188,314,195,311,198,309,202,312,210,313,216,315,220,313,226,320,232,329,243,336,240,339,243,344,243,351,252" />

        </map>
    </p:panelGrid>
</ui:define>

所以，无论我使用“href =”JavaScript：...“还是”onclick =“，都没有变化。我搜索了很多地方做了很多测试，但仍然没有知道如何在区域上“悬停”并且“onclick / href”都可以正常工作。

我有30个区域，但是你知道我只复制了两个区域。

提前感谢您的帮助！

Answer 1

在区域标记中最好有一个onclick事件而不是href。当你有很多区域（例如地图）时，最好通过Class而不是Id来调用动作。它还向我展示了将触发动作的以下事件，并且还将显示悬停效果：

    onclick="document.getElementsByClassName('nameofclasshere')[0].click();"

这对我来说非常有用......给塞尔吉奥·莫拉莱斯这个答案的信用：）

Href和onclick事件无法在<area />上运行

1 个答案: