Кликабельный логотип или ссылка поверх изображения

А мне вот всегда было интересно, можно ли сделать ссылку на логотип, который отображается как фон и прописывается в CSS.

Гораздо логичней сделать картинку именно фоном, кликабельным (к тому же, судя по закрывающеюмуся <img />, это XHTML, в котором нельзя использовать атрибуты width и height, а также нет title у ссылки и alt у картинки).

Для этого нам потребуется только текст, заключенный в ссылку — <a href=»»>Text</a> (и находящийся в диве id=»header») и одно свойство CSS:

#header a {
background:url(‘images/logo1.jpg’);

Дальше — нужный паддинг (отступ внутри рамки) в px.

padding: сверху справа снизу слева;
}

Проблема остается в тексте, который останется в центре картинки. Чтобы его сместить чисто по-горизонтали, можно воспользоваться text-indent прямо в нашем #header a.

Если же по-вертикали, то текст внутри ссылки нужно засунуть в спан — <a href=»»><span>Text</span></a>. А уже в CSS писать дополнительные паддинги в самом спане, ну или абсолютное позиционирование (только в этом случае, у header должно быть position:relative, чтобы считалось относительно блока, а не всей области экрана).

Это если кратко ;)

Уясню для себя ход ваших мыслей:
а) У вас есть фон
б) вы хотите чтоб часть фона была ссылкой
в) вы делаете новый слой с картинкой части фона и накладываете его точно поверх.
Вы в принципе всё делаете правильно но могу упростить задачу. Делаете прозрачный gif, размером той части фона которая должна быть ссылкой, вместо того чтобы «Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:».
Что мы в итоге имеем:
а) меньше гемора с точностью позиционирования.
б) облегчаем суммарный вес картинок на сайте.

Я пользуюсь таким же вариантом как и angelZ. Если хотите могу дать ссылку на статью, где я это расписывал!

А ещё, это можно сделать средствами HTML:
Пусть мы имеем картинку 100*100 и нам надо сделать ссылкой прямоугольник м-у точками: 40;40 и 90;60
Тогда пишем:

…
…

Способ старый, но зато CSS не трогаешь, а эффект как от варианта с прозрачным гифом.

Мои решения вопроса:

0) Начнём со способа рассмотренного в заметке.

Плюсы: он есть, о работает и это первое, что приходит в голову.
Минусы: нужно жестко следить, чтобы логотип находился точно на своём месте, так как (при использовании сложного фона) пиксель влево, пиксель вправо равносильны расстрелу. При резиновой верстке это еще сложнее. + это дополнительные несколько килобайт на закачку пользователю.

1) Проще всего действительно прозрачный gif (1х1 пиксель) — при этом всё делается так же, как описано в заметке, но не нужно ничего в фотошопе вырезать. Важно! задать размеры, чтоб gif потянулся на весь логотип.

Плюсы: просто и быстро; для пользователя всё замечательно.
Минусы: По логике вещей, логотип можно считать смысловым элементом страницы. При попытке, например, его «сохранить как» или распечатать страницу (если нет отдельного стиля для печати) логотипа не будет — как бы подстава получается.

2) Если вся картинка хедера сверстана не фоном, а одним , ему можно назначить map — подробнее в любом учебнике по html. Но способ морально устаревший, так как сейчас для этого используются бекграунды, а к ним такая технология неприменима.

3) Еще одна модификация способа из заметки: картика логотип аккуратно вырезается и сохраняется в png.

Плюсы: не нарушается логика (скорее семантика) страницы; если картинка немного съезжает в сторону — это незаметно. Все красиво.
Минусы: получаем проблему с форматом png в IE и еще несколько килобайт для пользователя (хотя некоторые утверждают, что png жмет даже лучше чем gpeg, но не знаю — точно не в фотошопе).

Вердикт — если семантика страницы не важна — используем прозрачный gif поверх, иначе играемся с png.

PS столько получилось, что стоит даже статью в своем блоге запостить :)

Немного дополню, раз такое обсуждение. PNG действительно жмет лучше GIF для малоцветных изображений. Для этого в Photoshop’е надо сохранять Save as for Web и выбирать количество цветов в палитре, правильно подбирая также и способ рассеивания. Лучше jpeg точно — т.к. не проявляются артефакты при сжатии. С PNG-8 нет проблем ни в одном из новых браузеров, в т.ч. и в ИЕ6, выигрыш по сравнению со сжатым GIF — 5-10%, по сравнению с JPEG — больше. Если же нужна полупрозрачность (для лого обычно не надо), то действительно, будут проблемы с PNG-24.

Сохранение логотипа также вещь ненужная обычно, поэтому фон предпочтительнее все же. Кроме семантики, играет роль также и оптимизация — обычно блокируется параллельная загрузка более, чем 3х файлов, и CSS начинает грузиться почти сразу с HTML. И изображения в фоне грузятся быстрее — именно это нам и надо, чтобы отнести все картинки не оформления в «пост-загрузку» (условно говоря).

По map’ам тоже добавлю — не всегда можно сверстать все фоном. Вообще, мапы сейчас надо использовать только в одном случае — если мы хотим сократить колво изображений на странице, подключаемых через img. Это вполне нормальный подход.

Во всем остальном обзор методов — отличный.

Да, PNG-8 не доставляет. Но пихать 24 туда, где он не нужен — тоже не стоит :). По поводу жмет не лучшим образом — возможно, еще 5-10% можно сэкономить, так что если вспомнишь, какой софт — опиши в своем блоге (я подписчик уже, да)))

С «пост-загрузкой», конечно, не все так просто. Я вот по материалам sunnybear, документов Yahoo и прочему пытаюсь дописать талмуд по оптимизации блога (в частности, Вордпресса), но вот с этим вопросом пока только вопросов больше, чем ответов.

Господа, прежде чем предлагать ПНГ24 (причём полученный на выходе из шопа) посмотрите статистику использования ослов 5-й и 6-й версий. К сожалению многих верстальщиков, включая меня, их использует большинство. А те танцы с бубном, необходимые для запуска альфа канала ИМХО не стоят тех килобайт и красоты.
Так что посмотрите какая прелесть этот пнг24, смахните скупую слезу и забудьте про него пока мир офисного планктона и тех у кого админы не позволяют ставить никакие другие браузеры кроме предустановочных (я не говорю про браузеры на движке осла) не пересядут как минимум на 7-го осла.)))

to angelZ:
Не такие уж и с бубном )) Нужно один раз найти нормальное для себя решение и юзать. Но мы уходим в оффтопик. Обещаю прикрутить у себя на блоге комментарии за выходные :)

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

Вобщем суть такова — на div в background’e которого задана картинка, накладываем другой div с прописаным css-свойством position:absolute; в зависимости от того какую часть картинки, хотите сделать ссылкой подгоняете этот div на нужное место, (для удобства для начала задаем border:1px solid; чтобы было видно куда двигать :) естественно затем убираем или же приравниваем к 0px) задаем высоту и ширину там же в CSS (Например: width: 150px; height: 36px;), затем уже в самом div’e прописываем событие onClick=»document.location=’index.php'» — это для примера index.php можно указать ссылку куда хотите =))). А да, и желательно бы к нашему div-ссылке :) указать z-index какой-нибудь по выше чем 1 =).

Данный способ я считаю избавит от ненужных телодвижений в сторону граф.редакторов, да и просто экономит время. Но есть и минусы — нет названия сайта, что не очень хорошо в плане индексации сайта поисковиками))) Но и это можно решить.

Спасибо Вам огромное! Я с помощью Вашей статьи сделала новую шапку на свой сайт «В Полный Рост» — вот, посмотрите: enioway.ru
Теперь сайт загружается гораздо быстрее — еще раз, огромное Вам спасибо!

Спасибо, статья очень полезная, особенно для новичков. Вопрос: у меня рамка вокруг ссылки и в левом углу значок, типа изображение :( Не подскажете как убрать?

так я в классе для хедера и ссылки хедера поставила значение border: none

div.art-Header-logo
{
position: absolute;
margin: 1px 445 93 13px;
z-index: 2;
}

div.art-Header-logo img
{
border: none !important;
margin: 0px;
}

div.art-Header-logo a img
{
border: none !important;
margin: 0px;
}

или не здесь? или вообще везде, что касаемо тега «а»?

Да, о нем, но я пока тренируюсь на локалхосте, поэтому там ничего нет:) работаю в мазиле. Так что делать-то?

за расширение спасибо огромное))))удобно! но вот с рамкой болт :( не выходит…

Спасибо большое за помощь:) Я начала все заново и внимательно-внимательно, и все получилось. Видимо по невнимательности и на уставшую голову:) Спасибо еще раз, пошла на паб переносить!

Здравствуйте! Правильно ли я делаю? У меня не получается(((
В index.php у меня так:

и т.д.

В template.css так (в самом конце дописала):
.logo1 {
position: absolute;
margin: 1px 0 0 1px;
z-index: 100;
}

Ничего не изменяется почему-то(((

Тоже думаю, как ссылку на изображение поставить, если оно описывается в CSS…попробую с прозрачным гифом сделать )))

А как сделать кликабельной картинку НЕ прямоугольной формы? Например, треугольную?

MAP и AREA — http://htmlbook.ru/html/map

спасибо, помог.)