无序列表中的 Dreamweaver 图像映射答案

【问题标题】：Dreamweaver image map in unordered list无序列表中的 Dreamweaver 图像映射
【发布时间】：2014-06-23 05:04:18
【问题描述】：

我正在使用 Dreamweaver 导出图像映射的像素坐标。一个已经完成，但另一个被证明是不可能的，也许是因为我的意图是不允许的。我想为其设置热点的“不可能”图像是无序列表中的列表条目之一，每当我尝试在代码视图中选择 img 元素来选取地图时，它都不起作用并选择ul 元素代替。

我只将这个软件用于图像映射及其代码验证功能，但它很痛苦，如果有一种方法可以定义/计算圆形图像映射的像素坐标，我会尽快不使用它.

任何建议，或者 DW 的行为本身以及我正在尝试的内容在 HTML 中是不允许的？

更新：更具体地说，它不仅仅是一个列表，而是一个以 div 为界的列表，它充当画廊，其输入来自可点击的缩略图图像锚，如下面的代码所示（为清楚起见，只有一个列表项）。我想做的是使“stuff-medium.jpg”成为可点击的图像，映射到图库中的下一张图像（通过 href“#two”），还为我的图库提供导航栏......

<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/stuff_medium.jpg"></li>
</ul>
</div>

<div>
<a href="#one" target="_self"><img src="../images/stuff_thumb.jpg"></a>
</div>

更新 II - 此代码有效；我是手工完成的，但如果我能在 DW 中弄清楚如何做到这一点，我会感到震惊：

<li id="one"><img src="../images/stuff_medium.jpg" border=0 usemap="#gallerymap">
<map name="gallerymap"><area shape="circ" coords="399,157,30" href="#two" target="_top"></li>

【问题讨论】：

无法重现您的问题，您能更具体一点吗？你在 jsfiddle 中的例子：jsfiddle.net/q8444
JavaScript 可以在没有 Dreamweaver 或图像映射的情况下执行此操作。见：stackoverflow.com/questions/2712744/…
为什么要在已经拥有 OWN 事件处理程序的 UI 元素上使用图像映射？
我不会担心阻止 javascript 的极少数用户。如果他们这样做了，无论如何他们已经习惯了非常糟糕的网络体验。
顺便说一句 +1 很重要

标签： html css dreamweaver

【解决方案1】：

在您的代码中放置一个警告，该警告仅在关闭 javascript 时才会显示。使用js给body添加一个类。关闭js不添加类并显示消息，开启js则将类添加到body中不显示msg

html:

<aside id="js-warning">This site requires JavaScript to work properly.  Please turn it on for more awesomeness!
</aside>

js:

<script>
$(document).ready(function(jswarning) {
    $('body').addClass('js');
});
</script>

css:

#js-warning {
    display:block;
}
.js #js-warning {
    display: none;
}

【讨论】：