javascript - 如何在 HTML 图像 map 上制作 twitter-bootstrap 弹出窗口

标签 javascript html twitter-bootstrap

我正在制作一个网站,在网站中我有一个带有图像映射的图像。

我被困在这一点上,弹出窗口在标签中完美工作,但在标签中却不起作用。有谁知道如何让 twitter-bootstrap 弹出窗口在图像 map 上工作?

我认为这与这一行有关:$('#example').tooltip(options) tooltip exaple

the twitter-bootstrap pover

谢谢(我希望我的英语是可以理解的)

最佳答案

将图像映射转换为类似的内容(用实际尺寸填充 ...px):

<div id="#map" style="position:relative;width:...px;height:...px;background-image:...">
    <a id="map-link-1" href="/path/url/for/target/or/#"
        style="position:absolute;top:...px;left:...px;width:...px;height:...px">&nbsp;</a>
    <a id="map-link-2" href="/path/url/for/target/or/#"
        style="position:absolute;top:...px;left:...px;width:...px;height:...px">&nbsp;</a>
    ...
</div>

然后像平常一样处理 anchor 。

关于javascript - 如何在 HTML 图像 map 上制作 twitter-bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11524359/

相关文章:

html - 使用响应式设计将元素大小从 PSD 转换为 HTML

html - 在 Bootstrap 移动菜单按钮中添加文本

任何给定 DOM 元素的 Javascript 字数统计

javascript - Angularjs - 更新 SPAN 的复选框

java - 将小部件添加到面板的第一个位置?

javascript - 将下拉值插入多个文本框

jquery - Css 转换不完全有效

ios - iPad 2 Safari 显示像素化的 html 文本和图像

javascript - Bootstrap 3 Navbar 切换 - 折叠但按钮不出现

html - Bootstrap 导航栏响应