Как сделать какую-либо область на сайте кликабельной ссылкой?

Создаем пустой div, задаем ему нужные нам размеры и позиционирование.
Добавляем свойство 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»
элемент надо располагать внутри тегов <map>

возможные свойства элемента
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>