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

Question

Я хочу, чтобы все ссылки .jpg имели определенное фоновое изображение. поэтому ссылка на страницу типа 'http://mysite/myimage.jpg' будет автоматически иметь префикс с небольшим значком. На самом деле все ссылки на изображения, т.е. .gif .png, а также с тем же значком. Если ссылка на сайт, т.е. .htm / .php / .html / .asp, она должна иметь другое изображение. Я хочу, чтобы это проходило через классы в CSS. Любая помощь приветствуется. TIA

Answer 1

Я думаю, что это должно работать, хотя используются селекторы атрибутов CSS3, поэтому реализация в браузере сильно отличается:

a[href$='png'],
a[href$='gif'] {/* styles */}

В основном выбираются все ссылки, у которых атрибут href заканчивается (часть $=) расширением типа файла 'png' или 'gif' (очевидно, что другие типы файлов также возможны).

Ссылка и дополнительные сведения по адресу: http://www.css3.info/preview/attribute-selectors/

<ч />

Отредактировано:

Итак, если бы я хотел сделать специальное изображение BG только для ссылок на YouTube, я бы использовал a[href$='youtube'] {/* styles */}

Нет, если вы хотите это только для ссылок на YouTube, вы можете использовать:

a[href*=youtube] { /* css */ }

*= является эквивалентом 'contains', хотя вы можете использовать:

a[href^=http://www.youtube.com] { /* css */ }

Answer 2

Вы можете сделать это с помощью CSS-селекторов + фоновых свойств URL. Например, чтобы включить значок со всеми тегами IMG в тег Anchor:

A IMG { background: url("/icon.png") no-repeat scroll; }