Question

我有一些扫描的新闻报道，我想在图像上方动态生成div。因此，当用户点击特定DIV时，他们会被重定向到该新闻的详细信息。这怎么可能？一种方法是在Image前面创建Absoulute定位div。但我不想为所有扫描图像创建DIV。我正在寻找一些动态的方式。加！我不是在寻找图片地图。

示例：http://www.express.com.pk/epaper/ 这是一张电子纸，他们在背景上使用单张图片。当然，他们不会每天创建静态html页面并重新定义他们的div位置

编辑：对于我的情况，我发现我的解决方案使用Facebook Like Tagging jQuery Plugin。

Answer 1

将一个绝对定位<div>并将其移动到任何聚焦的图像。相应地更改div的点击效果。

Answer 2

你将有一个包含图像的div，如下所示：

<div id="imageDiv">
    <img ... />
</div>

您将使用jquery在点击事件中的img之前创建一个div：

$("#imageDiv").prepend("<div>created div before image</div>");

Answer 3

不幸的是，对于像报纸图像这样的可变布局，绝对定位的div可能是你最好的选择。

在这种情况下，Javascript可能会导致比解决方案更多的问题：它不是您想要达到的目标的必要条件，禁用Javascript的用户将无法使用您的网站。

另一种可能性是使用服务器端语言来读取xml文件，该文件说明应将div放在图像上的位置。这将允许动态html页面，因为只需要更改xml（或类似）文件来更改内容。

如果您对此解决方案感兴趣，我可以生成一个示例。

Answer 4

稍微更简单的方法可能是使用图像映射。 Here's a good resource with working examples