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

Эта запись опубликована в Пятница, 14 декабря 2007 в 15:04 Рубрики: CSS и вёрстка.
Подпишитесь на RSS 2.0 ленту комментариев.
Вы можете оставить комментарий, или трекбек со своего сайта.