javascript - 如何将图像的标题属性链接到弹出的div

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

我正在建立一个网站来展示我的珠宝首饰。由于我的页面布局，我的图像没有描述，但用户可以看到这些图像。

当我查看同事的网站时，我注意到一些我可能会使用的东西 http://www.sarahschuchard.com/sites/objects.html 。这是一个轮播 JS，它将图像的 alt 和 title 属性链接到鼠标悬停函数，该函数在 div 中显示这些属性。

我试图隔离这个特定的代码，但我对 JS 的了解非常有限，所以它对我来说不起作用。有人可以帮助我实现这个想法吗？

Answer 1

经过一番研究，我想出了一个适合我需要的答案。事实上，我开始考虑使用自定义工具提示来显示附加信息，而不是轮播。

我选择的工具提示是 Tiptip。它本身很容易实现，但它开始干扰我安装的 lightbox2 插件。当鼠标悬停在具有 TITLE 属性的图像链接上时，它仍然显示默认工具提示(自定义工具提示旁边)。

默认的工具提示开始使用A标签的TITLE属性，而不是嵌套的IMG标签。省略 TITLE 的选项并不可取，因为灯箱使用此属性来显示信息。

使用鼠标悬停 JS 代码屏蔽 TITLE 与删除 TITLE 属性具有相同的效果。

经过一些修补和环顾四周，我开发了解决这个问题的方法。

我读到了有关使灯箱使用其他属性然后使用 A 标签的 TITLE 属性的选项。在JS文件中很容易找到相应的代码。 (灯箱 2 的第 166 行和第 174 行左右，我不知道其他灯箱之类的插件)。我将其更改为 ALT 属性(SEO 目的)，但我认为您可以将其更改为自定义属性以满足您的需求。

这为在 HEAD 标记中插入以下 JS 代码铺平了道路，以禁止页面中的默认工具提示，而搜索引擎仍然可以看到您的属性

$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});

这是结果 http://www.coenhofhuizen.com/Sites/sieraden.html

与灯箱兼容的自定义工具提示。

希望对其他人有帮助