图像映射不会对JQuery UI ID作出反应_Jquery_Css_Jquery Ui

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

jquery css jquery-ui

图像映射不会对JQuery UI ID作出反应,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,我有一张图像地图： <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-20

我有一张图像地图：

 <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>


这是用于显示信息的默认对话框。可以使用“x”图标移动、调整和关闭对话框窗口
$（“#对话框”）。对话框({
自动打开：错误
});
$（文档）.ready（函数（）{
$（文档）。在（'click'，'#Mexico'，函数（）上{
$（“#dialog”）.dialog（）；
});
});

我试图通过使用以下脚本来显示JQuery ui对话框部分：

注意代码中的“#墨西哥”。我不明白为什么，因为墨西哥是图像地图中的一个id，jquery不会注意到它是一个css id。现在，它没有做任何事情。不确定

onclick

属性在标记中做了什么，因此删除了这些属性。下面我们将等待文档准备就绪。另外，您是对的，它确实与

区域

元素上的

id

一起工作。希望这将有助于：

HTML:

id对于

区域

元素无效。尝试改用类。另请参见我也尝试了一个类，但它不起作用。请将代码包装在

$（document.ready（function（）{…}）

中。我使用了您的代码，但仍然无法显示对话框。我做错了什么？你看到小提琴了吗：我的例子对你有用吗？在Chromeare工作，控制台有错误吗？您尝试过其他浏览器吗？单击图像贴图时，对话框打开。我不确定你所说的“我在浏览器中得到的只是div代码”是什么意思，我用应该加载的图像更新了小提琴。单击eagle/snake，它将打开对话框？？结果表明您的代码工作正常，但我们使用的网站设计提供商不允许对JQuery库进行http引用。这就是引起我困惑的原因

<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>

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