Mr.KTO blog


  • Рубрики

  • Поиск

  •  
      
  • Поиск
  • реклама на mrkto.com





Настраиваемый 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'у.

habrahabr.ru google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru rumarkz.ru memori.ru moemesto.ru moikrug.ru myscoop.ru mister-wong.ru rucity.com vaau.ru

Комментарии (6) на “Настраиваемый alt-текст для картинок”

  1. liker пишет:

    Клево сделано. Детали к мелочам - вот высший класс. Проверил в FF, действительно классно смотрится

  2. kpk пишет:

    Спасибо большое за пост! Я никогда бы и не додумался бы до такого! Очень интересный метод!
    Заново открываю для себя возможности CSS.

  3. Darkness пишет:

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

  4. Dusya пишет:

    Действительно, все очень просто.

  5. энциклопедия пишет:

    Мне нравится читать авторские блоги

  6. ALLA пишет:

    Спасибо большое за пост!
    Побольше бы таких статей

Оставить комментарий