Использовать текст alt для эффекта наведения

Я пытаюсь создать эффект зависания для изображений, но я не могу добавить заголовок в тег img. Поэтому я думал использовать атрибут alt text для заголовка с эффектом зависания.Использовать текст alt для эффекта наведения

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere">

Есть ли плагин JQuery я могу использовать или любой другой метод для извлечения текста альта и использовать его?

источник

2015-11-13 ivhysenbelli

_ «Я не могу добавить заголовок на тег img» _ Почему нет? – j08691

Просто создайте маленький DIV, который останется скрытым. Когда вы переворачиваете изображение, запускайте функцию JS, которая заполняет ее текстом, и устанавливает ее местоположение рядом с тем, где находится мышь. – durbnpoisn

Символ 'alt' предназначен для отображения, когда изображение невозможно отобразить. – Anthony

Как и комментарий, я не уверен, почему вы не можете добавить заголовок либо в код, либо после факта.

$(document).ready(function(){ 
    $("img").each(function(){ 
     $(this).attr("title", $(this).attr("alt")); 
    }); 
});

Это создаст заголовок для изображения, в случае невозможности изменить сам текстовый код. Вы можете также использовать JQuery UI, чтобы сделать инструмент Совет: https://jqueryui.com/tooltip/

Можно также использовать .hover(), чтобы сделать свой собственный пользовательский совет: https://api.jquery.com/hover/

источник

2015-11-13 21:47:00 Twisty

Я пытаюсь добавить пользовательский CSS, но поскольку я использую wordpress, некоторые плагины не могут писать на этом фрагменте кода. thnx для решения – ivhysenbelli

вы не можете писать на этом фрагменте кода, но вы все еще принимаете ответ? – dippas

@dippas Я думаю, что OP означает, что они не могут редактировать код. Возможно, это происходит из устаревшего DB, так что 'img' просто не имеет атрибута' title', но имеет 'alt'. – Twisty

Как упомянуто @durbnpoisn, вы можете создать div и установить show/hide на mouseover - mouseout, чтобы дать эффект tooltip.

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere"> 
    <div></div> 

$('img').mouseover(function() 
{ 
    $('div').text($(this).attr("alt")); 
    $('div').show(); 
}).mouseout(function() 
{ 
    $('div').hide(); 
});;

http://jsfiddle.net/1fe1sanv/1/

источник

2015-11-13 21:58:20 DinoMyte

Что об использовании всплывающей подсказки? Вот CSS:

#tooltip {position: relative; display: block;} 
    #tooltip a span {display: none; color: #FFFFFF;} 
    #tooltip a:hover span {display: block; position: absolute; 
     width: 250px; background-color: #048042; left: 300px; 
     top: -10px; color: #FFFFFF; padding: 20px; 
     border: 4px solid #c4c3c3;} 
    #tooltipBottom {position: relative;} 
    #tooltipBottom a span {display: none; color: #FFFFFF; } 
    #tooltipBottom a:hover span {display: block; position: absolute; 
     width: 250px; background-color: #520e4e; left: 300px; 
     top: -300px; color: #FFFFFF; padding: 20px; 
     border: 4px solid #ffffff;}

Вы хотите играть вокруг с позиции, ширина, границы, цвета, шрифты и т.д., пока вы не получите это выглядеть так, как вы хотите, чтобы она выглядела.

Вот HTML:

<p id="tooltip"><img src="YOURIMAGE" /><a href="#" 
     style="text-decoration: none;"><img src="TOOLTIPIMAGE" alt="" 
     width="20" height="20" border="0" style="margin: 2px 0px 0px 
     2px" /><span>DESCRIPTION YOU WANT SHOWN</span></a></p>

Хорошая вещь о том, что это не зависит от яваскрипт и вы можете использовать его с текстом, изображениями и т.д. Я использовал его в прошлом для церквей который хотел hove popup ссылки для Священных Писаний, то есть ссылки на Иоанна 3:16 покажут всплывающее окно с текстом стиха.

источник

2015-11-14 01:43:47

Использовать текст alt для эффекта наведения

ответ

Смежные вопросы