Как добавить title на основе alt у тега img


В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на атрибут alt.

Но иногда есть потребность выводить описание картинки при наведении на фотку мышкой.
При использовании BBCODES редактора у нас нет такой возможности.

Для понимания сути происходящего обратимся к официальной документации DLE.
Теги при написании новостей


[img=выравнивание|свой текст для alt] ссылка [/img] Вставка картинки новость и выравнивание ее по указанному параметру, а также назначение картинке собственного описания



а так-же

[thumb=выравнивание|свой текст для alt] ссылка [/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру, а также назначение картинке собственного описания


Возможности прикрутить атрибут title нет :(

Предлагаемый java script автоматически добавляет атрибут titile на основе атрибута alt для каждого изображения.



Сам скрипт будем применять для полной новости (шаблон fullstory.tpl)


{* Автоматическое добавление атрибута title для картинок в блоке с .full-content на основе атрибута alt *}
<script type="text/javascript">
	jQuery(document).ready(function($) {
	  setTittleToImagesIn(".full-content");
	});

	function setTittleToImagesIn(selector) {
	  var $images = $(selector + " img");

	  $.each($images, function(index) {
	    var $this = $(this);
	    var alt = $this.attr("alt");
	    var hasTitle = $this.attr("title");
	    if (!hasTitle && alt) {
	      var title = "Рисунок " + (index + 1) + ": " + alt;
	      $this.attr("title", title);
	    }
	  });
	}
</script> {* .Автоматическое добавление атрибута title для картинок в блоке с #staticPage на основе атрибута alt *}


Для тега вывода содержимого статьи целиком

{full-story}


добавляем класс .full-content
получается так

<div class="full-content">
	{full-story}
</div>


Теперь если в теле публикации вы заморочились с добавлением описания к каждой картинке у вас автоматически появится атрибут title

Живой пример https://hikm.ru/numismatics.html
сам код картинок в админке

результат на сайте при наведении мышкой на фото



Скрипта написал Павел Pafnuty Белоусов


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Перевод] Все, что вам нужно знать о выравнивании во Flexbox

Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew. Что происходит при создании контейнера Flexbox. Резюме В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также... читать далее

[Перевод] Flexbox: насколько велика эта гибкая коробка?

Продолжаю публикацию переводов по особенностям CSS-технологии Flexbox. Из цикла опубликованы следующие статьи: Что происходит при создании контейнера Flexbox. Все, что вам нужно знать о выравнивании... читать далее

[Перевод] Всё, что нужно знать о выравнивании во Flexbox

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков... читать далее

[Из песочницы] Font (ещё более) Awesome — узорное изобретение

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu Dodangoda. Создаёте ли вы веб-сайт, мобильное или настольное приложение, есть... читать далее

Шпаргалка по верстке для больших и маленьких

Хочу представить вашему вниманию небольшую шпаргалку, в которой собраны решения некоторых из часто встречающихся проблем, а также кое-какие малоизвестные, на мой взгляд, факты. Статья рассчитана... читать далее

Блог им. RatID / Новые правила учета мета тегов поисковой системой Яндекс

В помощи Яндекса вебмастерам описано нововведение. Теперь Яндекс стрго указывает на то, что он использует при ранжировании мета теги «keywords» и «description». Ранее данные теги не считались... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте crocs transparent baby pink on BJ Ambis Art