Всем привет!

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

Создаем пустой див, задаем ему нужные нам размеры и позиционирование.
Добавляем свойство onClick и все готово.

<div id='header'>
	<div id='logo' onClick="location.href='/'"  >
		&nbsp;
	</div>
</div>

Добавьте эти строки в свой файл стилей

#header{
background:url('/img/logo.png') repeat-x top;
}

#logo{
float:left;	/*как вариант можно использовать position:absolute;*/
width: 315px;	/*задаем размеры кликабельной области*/
height:200px;
cursor: pointer; /*меняем рисунок курсора, чтобы показать
кликабельность объекта*/
}

если вам этого мало и вы хотите сделать объект нестандартной формы, то вам поможет тег «area»
элемент надо располагать внутри тегов

возможные свойства элемента
SHAPE — указывает форму объекта.
значения:
* rect — прямоугольник;
* circle — окружность;
* poly — многоугольник.
COORDS — задает координаты объекта. является «дополнением» атрибутом SHAPE. Способы задания координат для разных типов областей:

* SHAPE=»rect» COORDS=»левый x, верхний y, правый x, нижний y»;
* SHAPE=»circle» COORDS=»центр x, центр y, радиус»;
* SHAPE=COORDS=»A,B,C,D, … ,A,B». Каждая пара задает координаты вершин многоугольника. Первая и последняя пары совпадают задавая замкнутую фигуру;

HREF — определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

TARGET — определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезервированных имен, подробно описанных в атрибуте TARGET элемента A.

NOHREF — определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.

ALT — определяет альтернативный текст-подсказку для данной области.

<map>
<area coords="329, 50, 396, 15, 448, 50" shape="polygon"
 href="/" title="На главную">
</map>

Если у вас есть вопросы — пишите в комментариях, с удовольствием вам отвечу.
Не забывайте подписаться на RSS, чтобы не пропустить обновления.

Делаем кликабельной любую область сайта

19 комментариев к “Делаем кликабельной любую область сайта

  • 10.03.2011 в 04:59
    Постоянная ссылка

    Большое спасибо за то, что часто радуете нас результатами своей работы. На этом сайте всегда нахожу что-то полезное для себя. Искренне надеюсь, что продолжите его развивать. Желаю успехов в этом непростом деле.

    Ответить
  • 04.06.2011 в 19:03
    Постоянная ссылка

    postseriously спасибо за отзыв. Кстати, на вашем сайте ole4ka.com поехала верстка в мозилле. Причина в том, что объект img в диве «head», больше него по высоте. Чтобы исправить эту проблему поставьте высоту «head» больше или равной высоте вложенного изображения т.е. минимум 283px.

    Ответить
  • 11.06.2011 в 21:54
    Постоянная ссылка

    А чего у блога такая посещаемость низкая… Кстати на твой блог порчу навели, помогу снять

    Ответить
    • 12.06.2011 в 13:43
      Постоянная ссылка

      microfollowfriday Посещаемость низкая т.к. нет времени наполнять блог. Про порчу улыбнуло))
      co-nopay Спасибо.

      Ответить
  • 05.08.2012 в 19:42
    Постоянная ссылка

    Взгляните пожалуйста на главную страницу сайта la-belle.kz. Как можно реализовать подобное (изменяющий цвет и превращенный в ссылку графический текст, расположенный по кругу)?
    СПАСИБО за внимание и обстоятельный ответ!!!

    Ответить
    • 05.08.2012 в 21:52
      Постоянная ссылка

      Nadir там все просто — текст сделан картинкой, при наведении картинка меняется. Посмотрите в файрбаге как это реализовано, там все просто — div с меняющимся фоном по событию hover.

      Ответить
  • 29.07.2013 в 17:19
    Постоянная ссылка

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

    Ответить
    • 02.08.2013 в 01:04
      Постоянная ссылка

      Тут есть несколько вариантов:
      1) элементу li добавить свойство onclick и в нем сделать обработку перехода по ссылке
      2) сделать это, например, на jQuery, что-то типа $(‘#menu li’).click(function(){
      document.location.href = $(this).child(‘a’).attr(‘href’);
      });
      3) поменять верстку, так чтобы ссылки и были пунктами меню, т.е. вместо <li><a href=’/’>url</a></li> ставим просто <a href=’/’>url</a> и в css задаете нужное отображение ссылки, хоть блоком, хоть элементом списка, хоть как.

      изменение фона делается просто в css
      #menu li:hover {background: #f00;}

      Ответить
  • 17.11.2014 в 12:47
    Постоянная ссылка

    Здравствуйте. Помогите, пожалуйста, написать код. Создала на главной странице сайта полноэкранный слайдер, в котором пролистываются разные картинки. На последнем изображении нужно две определенные области сделать кликабельными. Расположены они на одном уровне внизу, на небольшом расстоянии друг от друга. В этих местах я в фотошопе нарисовала картинки. Буду признательна, если поможете — я только начинаю осваивать азы программирования, поэтому ОЧЕНЬ многого не знаю.

    Ответить
    • 17.11.2014 в 13:09
      Постоянная ссылка

      Здравствуйте, Юлия Сергеевна.
      В нужном месте вы можете разместить, например, <div></div> задав им необходимые размеры и позиционирование через css. Обработку клика можно добавить либо аттрибутом onclick=»тут ваш обработчик клика», либо через javascript.

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

90% сайтов рунета содержат уязвимости и могут быть взломаны! Проверь свой сайт!