將圖像插入標題 HTML 屬性

Question

我使用豪華的 jQuery 氣泡，我需要在氣泡內插入圖像。

使用這個插件，氣泡內的文本是使用標題屬性生成的（我有不同的文本，每個鏈接的圖像都不一樣，這就是我需要它的原因）。

<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 屬性中插入一個字符串，如果可以，如何？

Answer 1

請不要濫用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-屬性提取到數據 object 中。

我不知道這個確切的插件，但如果你查看文檔，你肯定有辦法控制插件從哪里獲取數據以及如何顯示。

Answer 2

我檢查了 Poshy Tip 文檔： http://vadikom.com/demos/poshytip/

有一種方法可以通過 function 設置內容，因此以下方法可能會很好地工作：

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

Answer 3

我會用這個 HTML go：

<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規則。

這樣您就不會攻擊 web，

Answer 4

你用的是哪個插件？

嘗試 html 編碼<img src='/static/images/school/parents/btn_nav/btn_change.png'> 。 在 PHP 中，我認為是htmlentities() 。

Answer 5

雖然您不應該在標題標簽中存儲標記，但您可以使用：

<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'])?>">

Answer 6

在屬性中使用 > 也可能會破壞 HTML。 如果您只想在疊加/氣泡/燈箱內放置圖像，我建議您查看http://fancybox.net/