Как правильно хранить информацию описания для изображения?

0

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

Я рассмотрел использование пользовательских атрибутов данных, но нашел следующее:

"Атрибуты пользовательских данных предназначены для хранения конфиденциальных данных на странице или приложении, для которых нет более подходящих атрибутов или элементов".

Итак, data-picinfo или какое-то другое настраиваемое поле данных похоже, что это может быть неприемлемо? Или это вполне уместно, так как мое приложение лайтбокса будет обращаться к необходимым полям данных, чтобы отобразить правильную информацию?

<img src="exampleimage.jpg" width="140" height="105" name="cool-image" data-picinfo="this was a beautiful day hiking the mountains"/>

Какой лучший и самый правильный способ выполнить то, что я пытаюсь сделать?

  • 0
    Я хотел бы пойти и использовать attribs, если хотите. В противном случае используйте массив или объект JavaScript.
  • 0
    Почему бы не поместить описание в элемент (скажем, в соответствующем стиле span)? Клиент предназначен в первую очередь для отображения, нет необходимости возиться с помещением данных в атрибут, если все равно вы собираетесь его отображать в элементе DOM дословно. Сделайте работу один раз на сервере.
Показать ещё 3 комментария
Теги:

3 ответа

1

Я бы использовал атрибут "alt" для описания изображений. Alt-текст не только гарантирует, что тег изображения соответствует стандартам W3C для доступности, но также предназначен именно для того, что вы пытаетесь выполнить.

Пример:

<img src="exampleimage.jpg" width="140" height="105" name="cool-image" alt="this was a beautiful day hiking the mountains" />

В этот момент вы можете сохранить это описание для отображения позже в переменной javascript следующим образом:

var imgDescription = document.getElementsByTagName('img')[0].getAttribute("alt");

Надеюсь, это поможет!

Поделиться
  • 1
    Атрибут alt предназначен для случаев, когда изображение вообще не отображается, т.е. является альтернативой изображению. Это может или не может совпадать с тем, что желает отобразить ОП.
  • 1
    @RobG, но атрибут alt всегда здесь и полезен для случая, когда изображение не отображается, а также для извлечения его значения с помощью javascript, я думаю, идея хорошая
Показать ещё 1 комментарий
0

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

Существует также обсуждаемый, мало используемый атрибут longdesc который должен предоставить ссылку на "длинное описание", но главным образом для целей доступности (особенно для людей, которые вообще не видят изображение), и он не включен в HTML5 CR.

Поделиться
  • 0
    я думаю, что это хороший способ, каково ваше мнение
  • 0
    @medBo, вопрос должен быть закрыт как опрос общественного мнения, но мой ответ дает технический ответ на основе спецификаций и практик HTML. Атрибут alt по определению определяет контент, который будет отображаться (например, в речи или шрифте Брайля), когда изображение не отображается, а не описание изображения. Например, для чисто декоративного изображения достаточно alt="" ; описание будет чем-то совершенно другим.
0

Из того, что вам нужно, я думаю, что нет более чистого способа сделать это, и ваш лайтбокс должен получить описание из другого атрибута, такого как название данных

<img src="exampleimage.jpg" width="140" height="105" name="cool-image" data-title="this was a beautiful day hiking the mountains" />

как эта помощь :)

Поделиться
  • 0
    Правда, но вы можете не захотеть видеть эту подсказку при наведении курсора.
  • 0
    см. также это обсуждение здесь stackoverflow.com/questions/13794891/…
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню