Question

我正在建立一个网站来展示我的珠宝作品。由于我的页面布局，我的图像没有可供用户看到的描述。

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

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

Answer 1

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

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

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

使用鼠标悬停JS代码阻止TITLE会产生与删除TITLE属性相同的效果。

经过一些修补和环顾四周后，我开始解决这个问题。

我读过关于使灯箱使用其他属性的选项，然后是TITLE A标签之一。相应的代码很容易在JS文件中找到。（对于灯箱2的第166和174行，我不知道其他灯箱如插件）。我将其更改为ALT属性（搜索引擎优化目的），但我可以将其更改为自定义属性以满足您的需求。

这为在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

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

希望它可以帮助其他人

Answer 2

这称为自定义工具提示。您要做的是创建一个容器并在mouseover上显示它，然后在mouseout上将其删除。

E.g。

$('image').mouseover(function (event) {
    $('<div></div>').css({
        'position': 'absolute',
        'left': event.pageX + 10,
        'top': event.pageY + 10,
        'z-index': 100
    }).addClass('tooltip').text($(this).attr('title')).appendTo(document);
}).mouseout(function (event) {
    $('.tooltip').remove();
});

Answer 3

您的同事正在网站上使用Lightbox。你可以在这里免费下载： http://lokeshdhakar.com/projects/lightbox2/ 原则上它很容易安装（查看示例），它使用图像的标题标签作为弹出框的标题。

如何将图像的title属性链接到弹出div

3 个答案: