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

кликабельны логотипСегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку – тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

европейский футбол

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

<div id="header">
 <div class="logo1">
  <a href="ссылка_на_главную">
   <img src="images/logo1.jpg" width="327" height="38" />
  </a>
 </div>
</div>

В файле стилей CSS пишем:

.logo1 {
 position: absolute;
 margin: 65px 0 0 282px;
 z-index: 100;
}

Здесь свойство position: absolute означает, что позиционирование будет происходить от левого верхнего угла страницы, а в данном примере – элемента <div id=”header”>. В принципе, для слоя доступны свойства горизонтального и вертикального позиционирования – left и top, которые задают отступы от левого и верхнего краев соответственно. Тем не менее, я встречал также использование обычного отступа margin.

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже.

Часто в шаблонах wordpress или любых других определяются отступы или рамки для всех изображений на сайте, поэтому может понадобиться обнуление этих значений:

.logo1 img {
	border: none;		
	margin: 0px;		
}
 
.logo1 a img {
	border: none;		
	margin: 0px;			
}

Если есть какие-то замечания или советы – с радостью выслушаю в комментариях.

P.S. Если вы собрались организовать конкурс с большим бюждетом, рекомендую почитать статью о проведении подобных мероприятий.
Кстати, для подсветки кода в блоге можно использовать специальный плагин для wordpress.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 49 для поста Кликабельный логотип или ссылка поверх изображения
  1. ]]> JuliettaRose ]]> (October 17, 2008)

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

  2. ]]> Tod ]]> (October 17, 2008)

    Попробую разобраться с этим следующий раз.

  3. ]]> Сергей М. ]]> (October 17, 2008)

    Гораздо логичней сделать картинку именно фоном, кликабельным (к тому же, судя по закрывающеюмуся <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, чтобы считалось относительно блока, а не всей области экрана).

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

  4. ]]> Сергей М. ]]> (October 17, 2008)

    конечно лучше

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

    да :)

  5. ]]> Tod ]]> (October 17, 2008)

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

  6. ]]> Сергей М. ]]> (October 17, 2008)

    Кстати, неправда. Даже ослик 7-ой и 6-ой грузят все отдельные файлы более-менее параллельно (вон на webo.in можно посмотреть диаграмкой). Т.е. грузится HTML и CSS, картинки из CSS, картинки имг. Стили вообще должны грузиться как можно быстрее, т.к. браузер именно по ним строит верстку, поэтому они даже в опере достаточно быстро грузятся. Вот у меня ЦСС так и не удалось ужать меньше 4 кБ, гзип я пока не применяю, поэтому рефлаш все-таки есть через секунду после начала загрузки страницы на плохой скорости.

    Плюс не стоит забывать об оптимизации – если все в ЦСС картинки по возможности поместить в один CSS Sprite (как у меня – при том, что десяток различных элементов используется, спрайты позволяет уменьшить количество HTTP-запросов по картинкам до 2-х), а также сохранять в гиф-пнг с ограниченной палитрой (в фотошопе выбрать save to web as и поиграть с цветами и их количеством), то все будет грузиться аццки быстро и гораздо клевее.

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

  7. ]]> angelZ ]]> (October 18, 2008)

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

  8. ]]> Tod ]]> (October 19, 2008)

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

  9. ]]> WebMast ]]> (October 21, 2008)

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

  10. ]]> Tod ]]> (October 21, 2008)

    WebMast, можешь оставить ссылку в комментариях дабы не только я мог воспользоваться этим методом.

  11. ]]> VaNToS ]]> (October 29, 2008)

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


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

  12. ]]> Tod ]]> (October 30, 2008)

    VaNToS, HTML в комментариях не хочет отображаться, напиши, пожалуйста, на мыло – stod84@gmail.com, я подправлю запись.

  13. ]]> Kitich ]]> (November 19, 2008)

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

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

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

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

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

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

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

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

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

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

  14. ]]> Tod ]]> (November 19, 2008)

    Kitich, я как увидел – был приятно шокирован! Спасибо за разъяснения. Действительно для отдельного поста материал:)
    Я сам вообще не верстаю, но сталкиваюсь с шаблонами при разработке сайтов, поэтому привел вариант, который вижу наиболее часто. Бывало и с прозрачными gif, но это чаще используется для небольших иконок – карта сайта, домашняя страница, а вот лого постоянно оформлено в DIV, который поверх фона. В этом случае хорошо, что можно картинку сохранить.

  15. ]]> Сергей М. ]]> (November 19, 2008)

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

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

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

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

  16. ]]> Kitich ]]> (November 19, 2008)

    to Сергей М.

    ну PNG-8, как я понимаю, полупрозрачности не даёт :(
    И все же где-то сталкивался с таким мнением: Фотошоп не использует всех возможностей PNG-24 – жмет не самым лучшим образом. Рекомендовался какой-то софт даже для работы с PNG, но я тогда не обратил внимание, к сожалению.

    Про “пост-загрузку” спасибо. Встречался с таким мнением, но только теперь понял, почему так :)

    to TOD

    А я просто обычно сам свои макеты собираю, так что приходится :).

  17. ]]> Сергей М. ]]> (November 19, 2008)

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

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

  18. ]]> Kitich ]]> (November 22, 2008)

    Как и обещал – http://kitich.in.ua/index.php?page_curr=blog&id=23 – подробнее о PNG :)

  19. ]]> angelZ ]]> (November 22, 2008)

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

  20. ]]> angelZ ]]> (November 22, 2008)

    2 Kitich
    Я думаю автор не будет против небольшого оффтопа. )))
    А какое для вас решение нормальное? Ява?
    И ещё вопрос, пнг в текстурном бакграунде?

  21. ]]> Kitich ]]> (November 22, 2008)

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

  22. ]]> Kitich ]]> (November 22, 2008)

    to angelZ:
    К сожалению, не помню :( последний раз действительно сталкивался с проблемой давно и это было на http://asu.ntu-kpi.kiev.ua

    Тогда, помню, выяснилось, что популярные хаки, которыми я пользовался, криво работают (совсем неожиданный поворот) на Опере :) В итоге потратил много времени, но что именно сделал – не помню. Надо будет покопаться и написать отдельно.
    Проблема бекграунда, скорее всего, таким образом не решается, но утверждать не буду.

  23. ]]> Tod ]]> (November 22, 2008)

    Я вовсе не против дискуссий)) Тем более таких интересных и полезных. Лично мне использование png не мешает, в принципе, там есть какой-то хак через htc файл, который я встречаю в большинстве последний сверстанных проектов.

  24. ]]> Верстальщик ]]> (April 20, 2009)

    Боянчег, но новичкам самое оно )

  25. ]]> Lexus ]]> (October 9, 2009)

    Как вариант, который я использую (кстати даже не прийдется ничего вырезать с помощью фотошопа, делать 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 =).

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

  26. ]]> Макс ]]> (December 20, 2009)

    обнуление этих значений можно провести через * { margin: 0; border: 0} :)

  27. ]]> Ольга ]]> (August 29, 2010)

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

  28. ]]> Костя ]]> (January 30, 2011)

    Давольно-таки интересно, но все это я читал, когда только открыл книжку по css.Статья для ленивых)

  29. ]]> Екатерина ]]> (March 16, 2011)

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

  30. ]]> Tod ]]> (March 16, 2011)

    Екатерина, нужно в файле стилей CSS найти тег “а” или класс, который для него определен, и отредактировать их.

  31. ]]> Екатерина ]]> (March 16, 2011)

    так я в классе для хедера и ссылки хедера поставила значение 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;
    }

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

  32. ]]> Kitich ]]> (March 16, 2011)

    Речь идет о “моем книжном”? В каком браузере возникают рамка и значок?
    Ил на хостинг залита версия без “артефакта”?

  33. ]]> Екатерина ]]> (March 16, 2011)

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

  34. ]]> Kitich ]]> (March 16, 2011)

    Просто сложно вылавливать подобные глюки, не видя всего кода – они могут возникать из-за других стилей или элементов кода, которые не видит никто кроме вас :)

    Попробуйте добавить border: none !important; не только к изображению, но и к ссылке, и ко всем элементам между ними, если такие есть. Также попробуйте добавить outline: 0; – этот параметр отвечает за “обводку” ссылок при нажатии на них.

    И самый главный совет: скачайте для своего firefox (вот за что я люблю этот браузер) расширение firebug (https://addons.mozilla.org/en-us/firefox/addon/firebug/). Я сам всегда использую его для вылавливания ошибок верстки. Оно добавит внизу окна кнопочку и позволит проанализировать любые элементы страницы и стили, которые к ним применяются. Просмотрите стили вашей ссылки и внешних/внутренних по отношению к ней элементов – скорее всего, увидите, откуда берется лишняя рамка.

  35. ]]> Екатерина ]]> (March 16, 2011)

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

  36. ]]> Kitich ]]> (March 16, 2011)

    Возможно буду писать глупости, но тестируем вслепую -_- так что приходится

    1. Предположим, что div.art-Header-logo a { border: none !important; outline: 0; } не помогло.

    2. Предположим, что вы просмотрели с помощью расширения стили, примененные к ссылке и всем элементам, которые отображаются на экране в том же месте, и тоже не нашли никаких косяков.

    Если вы не сделали чего-то из вышеперечисленного, делайте (хотя по пункту 2 сейчас пройдемся подробнее).

    3. Переберите элементы, которые выводятся в нужном месте экрана (ссылка, изображение и все сопутствующие элементы) и найдите во вкладке “макет” firebug’а элемент с ненулевым border’ом. Если такой есть, перепроверьте еще раз стили, которые к нему применены.

    4. Если такого элемента не нашли, проверьте соседние элементы – может туда попало что-то лишнее.

    5. Возможно, дело не в border’е, а есть какой-нибудь внешний элемент с отступом и фоном, который создает эффект рамки.

    5. Если ничего умного в голову больше не приходит (а пока не приходит), попробуйте использовать сброс стилей в начале css-файла (что-то типа http://meyerweb.com/eric/tools/css/reset/) – возможно браузер цепляет что-то свое.

    Пока ничего больше не придумал :(

  37. ]]> Екатерина ]]> (March 17, 2011)

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

  38. ]]> Kitich ]]> (March 17, 2011)

    Поздравляю. Заодно чему-то новому научились )

  39. ]]> Диана ]]> (April 12, 2011)

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

    и т.д.

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

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

  40. ]]> Владимир ]]> (November 17, 2011)

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

  41. ]]> Ромашка ]]> (February 22, 2013)

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

  42. ]]> Кирилл ]]> (July 10, 2013)

    Мил человек, большое тебе человеческое спасибо, 4 часа перебирал уроки всяких криворуких и только этот блог смог хоть чем-то помочь, спасибо-спасибо!

  43. ]]> Вячеслав ]]> (November 1, 2013)

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

  44. ]]> Tod ]]> (November 1, 2013)

    Вячеслав, если честно, не знаю. Там был какой-то элемент в HTML который позволял делать разной формы ссылки с картинки, но увы не помню как он называется. Надо гуглить, хотя там тоже какие-то сложные все варианты.

  45. ]]> Kitich ]]> (November 1, 2013)

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

  46. ]]> Tod ]]> (November 1, 2013)

    Kitich, спасибо, это оно! Минут 10 вспоминал как эти теги называются.

  47. ]]> Evgeny ]]> (October 10, 2014)

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

  48. ]]> Фокус ]]> (May 29, 2015)

    Ни как не могу сделать задний фон кликабельной ссылкой, как на кино порталах(

  49. ]]> Tod ]]> (May 31, 2015)

    Фокус, рассмотрел решение этой задачи в этой статье.

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