Вставьте изображение в атрибут HTML заголовка

Question

Я использую шикарный пузырь 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'])?>">

Можно ли вставить строку в атрибут заголовка, если да, то как?

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- в объект данных.

Я не знаю этого точного плагина, но если вы проверите документацию, у вас наверняка есть способ контролировать, откуда плагин получает свои данные и как он отображается.

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

Answer 3

Я хотел бы пойти с этим 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.

Таким образом, вы не совершите нападение на сеть,

Answer 4

Наличие> внутри атрибута может также нарушить HTML. Если вы просто хотите, чтобы изображение было внутри оверлея / пузыря / лайтбокса, советую посмотреть на http://fancybox.net/

Answer 5

, хотя вы не должны хранить разметку в теге title, вы можете использовать:

<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 кодировать <img src='/static/images/school/parents/btn_nav/btn_change.png'>. В PHP это htmlentities() Я думаю.