Настраиваемый alt-текст для картинок
На картинке ниже – мой блог в браузере Opera с включёнными картинками и без:
HTML:
<a class="imgoff" style="width:100px; height:50px;" href="#">
LogoImgText
<span class="imgon" style="background-image:url(images/logo.gif);"></span>
</a>
CSS:
.imgon {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
}
.imgoff {
display: block;
position: relative;
overflow: hidden;
}
Соответственно, преимущество такого способа в том, что можно создать неограниченное количество таких картинок. При этом не меняя CSS. Достаточно только указать width/height и url картинки в inline-стилях (смотрите на них, как на обычные аттрибуты тэгов).
P.S: Чтобы текст центрировать по вертикали, укажите (в <a style=) line-height равный height'у.
Понравился пост? – Поделитесь ссылкой:
июля 3, 2008 в 10:09
Клево сделано. Детали к мелочам - вот высший класс. Проверил в FF, действительно классно смотрится
июля 18, 2008 в 18:13
Спасибо большое за пост! Я никогда бы и не додумался бы до такого! Очень интересный метод!
Заново открываю для себя возможности CSS.
мая 15, 2009 в 15:18
А многие вообще игнорируют тег alt и прочие мелочи. Иногда ради интереса отключаю показ картинок в браузере и сравниваю сайты, попадаются порой такие что смотреть страшно и не найти ничего. Побольше бы таких статей чтоб новички обращали внимание на мелочи.
августа 31, 2009 в 23:09
Действительно, все очень просто.