logo标签列表

将图片插入标题HTML属性

jqueryjquery-pluginshtml
3

我使用poshy jQuery气泡插件，需要在气泡中插入一张图片。

使用这个插件，气泡内的文本是通过title属性生成的（我有不同的文本，每个链接都不是相同的图片，这就是我需要的原因）。

<a class="demo-tip-yellow" title="<img src='/static/images/school/parents/btn_nav  /btn_change.png'> " href="<?=site_url('school/parents/children/'.$item['id'])?>">

是否可以在title属性中插入字符串，如果可以，该如何操作？

4
不可能，title 只能接受文本。 - BoltClock
6个回答
3
请不要滥用title属性，它在可访问性（甚至SEO）方面非常重要。它应该只包含简单的文本。
您可以使用data-属性来存储图像源，并通过jQuery检索它。这是您可以实现此目的的最佳方法。
使用以下HTML：
<a data-tooltipimage="/static/images/school/parents/btn_nav/btn_change.png" 
    title="Something descriptive" 
    href="#" 
    class="demo-tip-yellow">

通过以下方式，您可以轻松获取属性：

$('demo-tip-yellow').attr('data-tooltipimage');

或者从jQuery 1.4.3开始，您可以简单地使用

$('demo-tip-yellow').data('tooltipimage');

因为jQuery会自动将data-属性提取到数据对象中。
我不知道这个插件的具体情况，但如果你查看文档，肯定可以找到一种方法来控制插件从哪里获取数据以及如何显示数据。
2
我查阅了Poshy Tip的文档：http://vadikom.com/demos/poshytip/ 有一种通过函数来设置内容的方法，所以下面的代码很可能能够实现：
<a href="http://linkurl" id="link" data-tooltipimage="http://imageurl" title="sometitle">link...</a>
<script type="text/javascript">
$('#link').each(function() {
    var img_url = $(this).data("tooltipimage");
    var tooltip = img_url ? "<img src='"+img_url+"' alt='' />" : $(this).attr("title");
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>

只有当您想要图像工具提示时，才应设置data-tooltipimage。

编辑：另一种方法是使用隐藏元素，在其中可以放置任何内容：

<a href="http://linkurl" id="link" title="sometitle">
    link...
    <span class="hidden-tooltip-data" style="display: none;"><img />...</span>
</a>
<script type="text/javascript">
$('#link').each(function() {
    var tooltip = $(".hidden-tooltip-data",this).html();
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>

编辑2： 还有一个：

<a id="link1" href="http://linkurl" title="sometitle">link...</a>
<span id="link1_tooltip" style="display: none;"><img /><a></a>...</span>
<script type="text/javascript">
$('#link').each(function() {
    var linkid = $(this).attr("id");
    var tooltip = $("#"+linkid+"_tooltip").html();
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>
我会点赞实际检查插件的工作方式，但你不应该真的使用 title 来做这件事。 - kapa
即使使用Javascript清空，HTML（应该是语义化的）仍将URL存储为该链接的标题（想象一下屏幕阅读器读出它）。我的哪些jQuery属性格式不正确？ - kapa
@inti 谢谢，但有些链接可能有两张图片，而有些只有一张...我想我会更换我的插件，使用更好的 jQuery 气泡和更可定制化的功能。 - Kevin Houde
@user763045 如果您在其他地方遇到相同的问题，如果您认为这个插件令人满意，请尝试想出一种方法来添加更多您想要显示的数据。我有时会使用将隐藏元素放置在我的链接之后或内部的方法，并从那里获取工具提示数据。我可以将此添加到答案中... - aorcsik
@inti 谢谢，那个有效 :) ，我需要学习很多关于 jQuery 的知识 :) 谢谢 :P - Kevin Houde
显示剩余9条评论
1
我会选择这个HTML代码：
<a class="tipped" href="/path/to/something.html">
    <img src="something-tooltip.png" alt="Real text of the tooltip."/>
    Something
</a>

结合这个CSS：

a.tipped img {
    display: none;
}

a.tipped:hover img {
    position: absolute;
    display: block;
    margin: 10px 0 0 10px;
}

你不需要使用JS，但当然可以使用它来为工具提示添加动画效果。在这种情况下，您可以删除a.tipped:hover img规则。

这样做就不会对网站造成任何影响了。

0

虽然你不应该在标题标签中存储标记，但你可以使用：

<a class="demo-tip-yellow" title="<?php echo htmlentities(<img src='/static/images/school/parents/btn_nav  /btn_change.png'>);?> " href="<?=site_url('school/parents/children/'.$item['id'])?>">
0
你正在使用哪个插件？
尝试对<img src='/static/images/school/parents/btn_nav/btn_change.png'>进行HTML编码。在PHP中，我想应该使用htmlentities()函数。
0

在属性内部使用 > 可能会破坏 HTML 结构。如果您只想在叠加层/气泡/灯箱中放置图像，我建议查看 http://fancybox.net/。

只有在点击时才能实现气泡效果吗？气泡需要在悬停时出现。我需要在悬停时将两个带有链接的图像放置在气泡内（用于我的链接）。 - Kevin Houde
我真的不确定。我没有意识到您正在执行工具提示类型的功能。我以前使用过jquery工具提示，并将其更改为单击。默认值是悬停：http://flowplayer.org/tools/tooltip/index.html - agmcleod
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接