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

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

javascript html

Javascript 如何将图像的title属性链接到弹出div,javascript,html,title,Javascript,Html,Title,我正在建立一个网站来展示我的珠宝首饰。由于我的页面布局，我的图像没有对用户可见的描述当我在浏览一位同事的网站时，我注意到一些我可能会用到的东西。下面是一个carouseljs，它将图像的alt和title属性链接到mouseover函数，该函数在div中显示这些属性我试图分离出这段特定的代码，但我对JS的了解非常有限，所以我没有成功。有人能帮我实现这个想法吗？你的同事正在网站上使用Lightbox。您可以在此处免费下载：原则上，它很容易安装（请检查示例），并使用图像的标题标记作为弹出框的

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

当我在浏览一位同事的网站时，我注意到一些我可能会用到的东西。下面是一个carouseljs，它将图像的alt和title属性链接到mouseover函数，该函数在div中显示这些属性

我试图分离出这段特定的代码，但我对JS的了解非常有限，所以我没有成功。有人能帮我实现这个想法吗？

你的同事正在网站上使用Lightbox。您可以在此处免费下载：

原则上，它很容易安装（请检查示例），并使用图像的标题标记作为弹出框的标题。

您的同事正在网站中使用Lightbox。您可以在此处免费下载：

原则上，它易于安装（请查看示例），并使用图像的标题标记作为弹出框的标题。

这称为自定义工具提示。您要做的是创建一个容器并在

mouseover

上显示它，然后在

mouseout

上删除它

例如

$（'image'）.mouseover（函数（事件）{
$（''）.css({
'位置'：'绝对'，
“左”：event.pageX+10，
“顶部”：event.pageY+10，
“z指数”：100
}).addClass（'tooltip'）.text（$（this）.attr（'title'））.appendTo（文档）；
}).mouseout（函数（事件）{
$（'.tooltip'）.remove（）；
});

这称为自定义工具提示。您要做的是创建一个容器并在

mouseover

上显示它，然后在

mouseout

上删除它

例如

$（'image'）.mouseover（函数（事件）{
$（''）.css({
'位置'：'绝对'，
“左”：event.pageX+10，
“顶部”：event.pageY+10，
“z指数”：100
}).addClass（'tooltip'）.text（$（this）.attr（'title'））.appendTo（文档）；
}).mouseout（函数（事件）{
$（'.tooltip'）.remove（）；
});

经过一些研究，我找到了一个适合我需要的答案。事实上，我开始考虑使用自定义工具提示来显示附加信息而不是转盘。我选择的工具提示是Tiptip。它本身很容易实现，但它开始干扰我安装的lightbox2插件。当鼠标悬停在具有标题属性的图像链接上时，它仍然显示默认工具提示（在自定义工具提示旁边）

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

使用mouseover JS代码屏蔽标题将产生与删除TITLE属性相同的效果

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

我读过关于让lightbox使用另一个属性，然后使用标签标题的选项。相应的代码很容易在JS文件中找到。（关于lightbox 2的第166行和第174行，我不知道其他类似lightbox的插件）。我将其更改为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'));
    });
});

结果如下

与lightbox兼容的自定义工具提示

希望它能帮助其他人