lacrim
@lacrim
Отшибленный на всё голову экспериментатор.

Как показывать alt изображения текстом?

Вопрос банальный забыл как javascript / jquery заставляет показывать alt-"text" альтернативный текст на странице рядом с изображением простым текстом.

Спасибо Евгений Петров за решение и Алексей Николаев за обращение к здравому смыслу! Написал ещё одну похожую конструкцию для схожей задачи, может кому пригодится, вытягивает текст из title

<script type='text/javascript'>
$(window).load(function(){
$('img.catalog').each(function() {
    $(this).after( "<div class='img-title'>" + $(this).attr('title') + "</div>" ); 
});
});  
</script>
  • Вопрос задан
  • 5494 просмотра
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
$('img').each(function () {
	$(this).after($('<span>').html($(this).attr('alt')));
})


Как верно заметил @Heian, лучше alt использовать по его прямому назначению (ошибка при загрузке изображений). Тогда для замены таких изображений:

$('img').each(function () {
	if (this.readyState != 'complete') {
		$(this).on('error', function () {
			$(this).replaceWith($('<span>').html($(this).attr('alt')));
		});
	}
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Атрибут, отвечающий за замену незагрузившегося изображения текстом - alt (у тега img). Этого обычно бывает достаточно для замены. Однако если необходима более тонкая система, на помощь вам придут все возможности JS. Вы можете создать по событию error при загрузке изображения функцию, которая будет добавлять определенное описание (при помощи любого элемента), как вариант. Подобное описал @Petroveg в ответе выше.
Ответ написан
Комментировать
Берёте div, с котором написан ваш alt-текст (можно задать стиль тексту). Поверх этого текста через z-index устанавливаете ваше изображение. Размеры div и img одинаковые. При загрузке изображения пользователь видит текст в div-е, после загрузки видит само изображение. Верстка не ломается. В принципе, можно даже написать небольшой скриптик реализующий это.
Ответ написан
Комментировать
WiKiTik
@WiKiTik
Имеется необходимость в просмотре кодов Emoji-смайлов в постах ВКонтакте. Например, вот пост:
vk.com/wall-124855981_31288
В коде страницы нужные нам коды записаны в атрибуты Alt. Через Tampermonkey запустил указанный выше скрипт:
$('img').each(function () {
  $(this).replaceWith($('<span>').html($(this).attr('alt')));
});

К сожалению, он не работает. Не подскажете, что нужно изменить в скрипте, чтобы вместо изображения показывался alt-"text"?
P.S. В javascript/jquery я полный ноль)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы