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

Question

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

当我浏览一位同事的网站时，我注意到了一些我可能会使用的东西http://www.sarahschuchard.com/sites/objects.html.这里有一个旋转木马JS，它将图像的alt和title属性链接到一个mouseover函数，该函数在div中显示这些属性

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

Answer 1

经过一番研究，我找到了一个适合我需求的答案。事实上，我开始考虑使用自定义工具提示来显示附加信息，而不是旋转木马。

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

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

用mouseoverJS代码屏蔽TITLE将产生与删除TITLE属性相同的效果。

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

我读到关于让lightbox使用其他属性的选项，然后是A标记的TITLE。相应的代码很容易在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'));
});
});

结果如下http://www.coenhofhuizen.com/Sites/sieraden.html

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

希望它能帮助其他人

Answer 2

这被称为自定义工具提示。您要做的是创建一个容器并在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();
});

Answer 3

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