На картинке ниже – мой блог в браузере 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'у.

Прочитав про Сглаженные закругленные углы без использования изображений, я уже было подумал создать сервис, переводящий картинки в html-код.

Например, для защиты e-mail от спама - его обычно переводят в картинку. Задача в том, чтобы, если у пользователя отключены картинки, он всё равно видел бы e-mail.

Я даже придумал название домена для этого сервиса - image2html.com. Классно?

Увы, меня опередили - сервис появился 1 января этого года.

Наслаждайтесь!
(иногда картинка кэшируется - надо подождать, или переименовать)

Далее »