Question

我有一张图片地图：

 <html>
<img id="Image-Maps-Com-image-maps-2014-08-11-113524" src="MapFinal_002.png" border="0" width="500" height="500" orgWidth="500" orgHeight="500" usemap="#image-maps-2014-08-11-113524" alt="" />
<map name="image-maps-2014-08-11-113524" id="ImageMapsCom-image-maps-2014-08-11-113524">
    <area alt="Pioneer Mexico" title="Mexico" href="#" shape="rect" coords="143,372,193,422" target="_self" id="Mexico" />
    <area shape="rect" coords="498,498,500,500" alt="Image Map" title="Image Map" />
</map>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script>
    $("#dialog").dialog({
        autoOpen: false
    });

  $(document).ready(function(){
  $(document).on('click', '#Mexico', function() {
         $( "#dialog" ).dialog();
  });
});
</script>
</html>

我正在尝试使用以下脚本来显示JQuery-ui Dialog部分：

请注意代码中的“#Mexico”。我不明白为什么，因为#Mexico是图像映射中的id，jquery不会将其视为css id。现在，它没有做任何事情

Answer 1

这里有几个问题。不确定onclick属性在您的标记中做了什么，因此删除了这些属性。下面我们还等到文档准备好了。此外，您是对的，它适用于id元素上的area。希望这会有所帮助：

HTML：

<img id="Image-Maps-Com-image-maps-2014-08-11-113524" src="/assets/site/img/MapFinal_002.png" border="0" width="500" height="500" orgWidth="500" orgHeight="500" usemap="#image-maps-2014-08-11-113524" alt="" />
<map name="image-maps-2014-08-11-113524" id="ImageMapsCom-image-maps-2014-08-11-113524">
    <area alt="Pioneer Mexico" title="Mexico" href="#" shape="rect" coords="143,372,193,422" target="_self" id="Mexico" />
    <area shape="rect" coords="498,498,500,500" alt="Image Map" title="Image Map" />
</map>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

JS：

$(function () {
    $("#dialog" ).dialog({ autoOpen: false });
    $("#Mexico").on("click", function () {
        $("#dialog").dialog('open');
    });
});

JSFiddle

图像映射不会对JQuery UI ID做出反应

1 个答案: