25.12.2013

Как сделать блок div гиперссылкой

Как сделать так, чтобы весь блок div был одной общей гиперссылкой? Если внутри есть какой-то текст или картинка, то тогда все просто, а вот если внутри блока ничего нет кроме фоновой картинки...

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

Во-первых, в основном коде в нужном месте вставляем следующий код:

<div class="divlink" onclick="location.href='Ваша ссылка';">
</div>

 

В принципе, это уже все - ссылка будет работать.

Однако тут еще пока есть два недостатка.

Первый - это то, что пустой блок div имеет нулевые размеры. 

Второй недостаток - это отсутствие курсора в виде указующего пальчика, по которому все и узнают о существовании гиперссылки.

Решается это с помощью стилей. В любом подключенном файле css вставляем описание типа:

.divlink {
           width: Xpx;
           height: Ypx; 
           cursor:pointer;
}

где X и Y это размеры вашего блока.

Вот и все! Пользуйтесь на здоровье!