javascript - 指定工具提示位置

标签 javascript html css

我正在这个网站上工作:http://india.kentlewis.net/book1.html .

我在图表中显示了一系列缩略图。我已将页面配置为 onmouseover,全尺寸图像作为 tooltip 框弹出。问题是图像是 800x600,因此图表位于屏幕中间,至少部分图像总是在屏幕外。

我正在寻找一种方法,使弹出窗口出现在特定位置(比如屏幕的左上角),而不管光标位置如何。

最佳答案

使用 mouseover 会有一个问题:如果较大的图像出现在 mouseover 的固定位置,几乎不可能确保它不覆盖缩略图的位置;当它出现时,您的光标不再位于缩略图上方(而是位于较大的图像上方)。图像会自动再次隐藏。

因此,如果您想要较大图像的固定位置,我建议使用/编写另一个脚本,在单击时打开图像,并带有“关闭图像”类型的链接。灯箱脚本通常是这样做的。

原创灯箱:
Lighbox 2 -- 作者 Lokesh Dhakar “...一个简单、不显眼的脚本,用于在当前页面上叠加图像。它的设置非常简单,适用于所有现代浏览器。” (我相信这是“原始”灯箱脚本的第二个版本)

我的建议(我使用的那个 -- 更轻,更符合标准):
Slimbox 2 -- Christophe Beyl “...是流行的 Lightbox 2 脚本的 4 KB 视觉克隆,由 Lokesh Dhakar 编写,使用 jQuery javascript 库编写。它被设计为非常小、高效、标准友好、完全可定制、更多方便且与原始 Lightbox 2 100% 兼容。”

关于javascript - 指定工具提示位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6406715/

相关文章:

javascript - 为什么简单的 html 和 css 在 Angular 2 元素中的工作方式与 vanilla html 网站不同

javascript - onmouseout 事件未能触发并更改值

javascript - 为什么我的 "<br/>"标签被转换为 "&lt;br/&gt;"?

css - 最大宽度菜单有问题

javascript - Bootstrap 在 IE10 中仍未显示

将元关键字写入新(浏览器)选项卡的 Javascript 书签

javascript - 3djs 中的视频标签

javascript - 如何让一张表的列宽始终匹配另一张表对应的列宽?

html - 在 slider (Chrome) 中通过表单域切换时出现意外滚动

CSS 下拉菜单未完全显示