Question

我更喜欢更简单的桌面编程场景（当谈到这类东西时，处理这个问题要简单得多）。

我有一个很大的.png文件，我希望在浏览器中显示，这实际上是一个带有图标的地图，当用户将鼠标悬停在我要绘制的图标上时（最好是）一个图形窗口（可以是另一个图像预览） -designed）并在这个窗口上放置样式文本（基本显示）。

.png将使用<img>和<map>在<area>代码中使用，因此<canvas>和适用的javascript函数是不可能的，它不起作用，并没有透明的双重欺骗（已经尝试过）。

另一方面，为什么我的8岁妹妹可以在Windows上使用旧的IDE和语言进行如此简单的任务，而且我无法在浏览器中找到LOL！

Answer 1

使用画布甚至作为Google地图的自定义图层有很多方法可以做到这一点，但是如果你不需要高级平移和缩放，基本的HTML就应该这样做。

我会做什么：

在img标记
将其放入div

position: relative

将每个图标放在地图上，绝对定位，例如position: absolute; left: 100px; top: 100px
将每个图标的onclick事件链接到jQuery UI dialog。

粗略的示例CSS：

div.map { position: relative; width: 400px; height: 400px }
div.map .marker1 { position: absolute; left: 100px; top: 120px }

HTML：

<div class="map">
  <img src="image.png">

  <img class="marker1" onclick="$( '#dialog' ).dialog();" src="marker.png">

</div> 

<!-- jQuery UI dialog -->

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

Answer 2

结帐this question about a canvas quivalent of image map。从答案来看，尤其是this link似乎得到了答案，尽管有画布和javascript（你无法开始工作）。

你可能也会发现Mark Pilgrim的Introduction to the HTML5 Canvas很有用，特别是他的实例，因为它可以将图像和文字绘制到画布上，并处理非常精确的点击。

Javascript，使用<img/>上的文字绘制窗口

2 个答案: