Geek asks and answers

Insert image into HTML header attribute

I am using poshy jQuery bubble and I need to insert an image inside the bubble.

With this plugin, the text inside the bubble was generated using the title attribute (I have a different text, its not the same image for each link, this is why I need it).

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

Is it possible to insert a string inside the title attribute, if so, how?

+3
source share
6 answers

Please do not abuse the attributetitle , it is very important also in terms of accessibility (and even SEO). It should contain only plain text.

You can use attributes data-to store the image source and get it through jQuery. This is the best way to achieve this.

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

, , , .

+3

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>

EDIT 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>
+2

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.

This way you won’t attack the Internet,

+1
source

Which plugin are you using?

Try html encode <img src='/static/images/school/parents/btn_nav/btn_change.png'>. In my opinion, in PHP this is htmlentities().

0
source

while you should not store markup in the title tag, you can use:

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

Having an> attribute inside an attribute can also break HTML. If you just want to have the image inside the overlay / bubble / lightbox, I suggest looking at http://fancybox.net/

0
source

More articles:


All Articles