0

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

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

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

4

3 回答 3

2

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

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

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

用 mouseover 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

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

希望它可以帮助其他人

于 2012-10-07T13:12:50.210 回答
1

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

例如

$('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();
});
于 2012-10-05T11:23:51.837 回答
0

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

于 2012-10-05T11:22:29.367 回答