如何在div标签中映射背景图像答案

【问题标题】：how to map background image in div tag如何在div标签中映射背景图像
【发布时间】：2010-07-09 11:23:05
【问题描述】：

我想创建一个可以单击并转发到“#”的框，所以我认为这是个好主意：

但不幸的是 areamaps 不能在 div 或 p 标签中使用：/ 任何人都知道一个好的解决方案是什么？

【问题讨论】：

对不起留下我的代码
我认为这很可能是一个doctype.com -question。
不确定，但我认为usemap 仅对图片有效
是的，usemaps 不能在标签中使用。它仅适用于图像。
和object元素但是object[usemap]的支持很糟糕。

【解决方案1】：

这与 php 无关，因为它发生在导航器中。改用javascript：

<div style='background:url(image.jpg)' onclick='function(){document.location.replace="#"}'> </div>

【讨论】：

不清楚您想匹配一个区域。我仍然认为 javascript 是您的解决方案。一种原始方法是检查与 onclick.event 匹配的匿名函数中光标的鼠标位置。 Javascript/jQuery 具有检索光标位置的功能，请参阅docs.jquery.com/Tutorials:Mouse_Position。同样，您可以检查 div 的实际位置，因此您有 bg 图像的位置。最后用 if() 做两行数学运算，检查你的光标是否在你的 bg 图像内，如果是则重定向。

【解决方案2】：

您可以在 div 中创建标签。您可以提供这些子标签和 id，或者在标签的样式属性中应用样式。将标签样式设置为 display:block 并通过 position:absolute 或 position:relative 以及属性 top:5px 和 left:5px 定位链接。适当设置宽度和高度以及顶部和左侧。

【讨论】：