Элегантно аннотировать изображение с помощью тега alt

Я хотел бы элегантно аннотировать изображение при наведении (или нажатии) содержимого тега alt этого изображения. Я хотел бы использовать только CSS (если возможно) и не хочу использовать jQuery, потому что страница невероятно проста, и я не хочу ничего лишнего.Элегантно аннотировать изображение с помощью тега alt

Пока я не могу писать JS в данный момент, я только смог найти подобные примеры, которые используют JQuery: display alt tag for image using this - jquery

Спасибо.

источник

2016-03-06 urbanaut

Обратите внимание, что атрибут «alt» предназначен для описания изображения, которое должно использоваться, если изображение не может быть загружено. Атрибут «title» обеспечивает поведение, которое вы описываете по умолчанию в браузерах с «зависанием» поведения. – Pointy

afaik нет способа получить атрибут 'alt', используя только css. я бы хотел, чтобы быть доказанным неправильно, хотя .. –

@ RienNeVaPlu͢s хорошо современные браузеры могут получить атрибуты ограниченным, но полезным способом, но трюки с ': before' или': after' не будут работать с '' тегами, потому что они не имеют содержания. – Pointy

Использование элемента HTML5 <figure> вы можете использовать элемент <figcaption>, чтобы отобразить описание изображения. Это семантический подход к тому, что вы хотите достичь. Атрибут alt предназначен для того, когда изображение не может быть загружено и отличается от figcaption.

<figure> 
    <img src="/random-image.jpg" alt="Alt description"> 
    <figcaption>Here comes the description</figcaption> 
</figure>

Вы можете скрыть figcaption с помощью CSS и на кране (или нажмите) показать.

источник

2016-03-06 15:09:58 Roy

Я предпочитаю это по моему решению: D –

@TomKentell Спасибо. На мой взгляд, лучшее семантическое решение. – Roy

Да, это выглядит лучше. Я все равно хотел бы добавить текст «alt», хотя, потому что это лучше для доступности. Я сделал скрипку с jQuery, но я до сих пор не знаю, как ** сделать это с помощью JS **: https://jsfiddle.net/urbanaut/gynh5cus/5/#&togetherjs=qPDoCCLpNm – urbanaut

Вы не можете использовать: до или: после того как @Pointy правильно сказал. Это самозакрывающийся элемент, поэтому контента нет. Только атрибуты.

Однако, если вы можете контролировать, где находится фактический текст, вы можете сделать something like this. Это использует свойство/com/CSS-контент/attr. Подробнее об этом см. David Walsh's post.

div { 
    position:relative; 
    width:500px; 
    height:300px; 
} 

div:after { 
    position:absolute; 
    bottom:0; 
    right:0; 
    padding:10px; 
    content:attr(data-alt); 
    color:#FFF; 
    background:#000; 
}

Вслед за HTML, как этот

<div data-alt="Sample Alt Text"> 
    <img src="//placeimg.com/500/300/any" /> 
</div>

Edit: если вы хотите, чтобы страницы для проверки, убедитесь, что вы добавить атрибут альт в IMG, а также. Либо пустой alt="", предоставляя читателям экрана возможность считывать содержимое CSS (я не уверен на этом, вероятно, зависит от программы чтения с экрана). Или добавьте текст alt в атрибут alt.

источник

2016-03-06 15:14:22

Элегантно аннотировать изображение с помощью тега alt

ответ

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