Автор: Крис Койер
Перевод: Всеволод Козлов
Вы, наверняка, хоть раз сталкивались с задачей сделать блок контента, заключенный в DIV, кликабельным. Эта затея отлично реализована на сайте веб-компании StudioForYou — этим приемом обеспечена кликабельность разноцветных блоков!
Итак, как же это делается?
HTML-код трюка:
<div onclick="location.href='Гиперссылка';" style="cursor: pointer;"></div>
Style-параметр превращает курсор мыши в привычный для гиперссылок «пальчик» при наведении на кликабельный DIV.
Оригинал статьи: Creating Clickable DIVs
Смотрите также:
- Как создать логотип?
- Слайд шоу для сайта
- Prestashop шаблоны
- Шаблоны сайтов css
- Jquery скрипты
- Семантика HTML
- Css button
- Css редактор
- Ajax вкладки
- Принципы создания сайта
28 комментария(-ев)
Спасибо!. Будем знать. Пригодиться.
Хм… то есть ссылка как бы и не ссылка? то есть поисковик ее не видит?
очень пригодилось, спасибо
мда… такие статьи в дет саде можно преподавать… смешно
В дет саду или нет, а мне оч пригодилось. В инете так четко трудно найти решение этой проблемы.
А как сделать так, чтобы при наведении текст в блоке подсвечивался (как ссылка обычная)?? Если один блок, то это легко сделать.. а как быть, если в div`е находятся ещё 2-3 элемента??
Дет. саде, не в дет. саде, однако инфа полезная.
А засунуть тег «а» в див немодно что-ли?
Кстати делали сайт для одного из банков банковской группы Зенит — у них по корпоративным стандартам отключён яваскрипт, так что с таким примером на своём сайте можно заказчика про*бать.
Он заходит — а там нифига не работает…
Кстати поисковики такую хрень не индексируют.
Списками такое нада делать и точка !!!!
«А засунуть тег “а” в див немодно что-ли?»
а ты подумал, что если засунуть на ссылку внутри дива, то пользователю придется щелкать именно на ссылке, а при щелчке на самом диве не будет происходить ничего? типа, «кто попадет в маленькие букафки внутри этого большого блока — тот молодец»?
2аффтор.
а если у пользователя яваскрипт отрублен в браузере? то он не сможет пользоваться сайтом?
kas1e если ты что-то не умеешь делать то не нужно писать ерунду… суём в блок ссылку тянем её 100% по ширини и 100% по высоте и выставляем свойство display:block;
Народ, все такие умные, я ору)))
Какие ява-срипты, какие к чёрту списки, вы чего! Еслок должен стать ссылкой, то и нужно его сделать ссылкой, и всего делов!
Block text
Блин никак не могу написать код. Короче смысл в том, что блок просто вкладывается в тег А
Чего гоните то, вот именно в моем случае мне совершенно пох на индексацию , так как надо было сделать див ведущий на стартовую страничку, и линк A мне туда ненужно было ставлять вовсе, так что данный вариант как нельзя лучше подошел, спасибо автору!
ПС а такие клиенты у которых ИЕ4 версии и ява скрипт на компах не тянет лучше сначала апгрейды руководителей сделать а потом уже сайты заказывать…деревня какая то…
нелюблю джаваскрипт. по этому клибельный блок делаю так
a href=»куданадо» style=»display:block»
и всё
а если в новом окне, то как «blank» прописать?
блин чертов див этот! автор подскажи как эту вещь для ие реализовать?? там при клике никуда не переходит, вроде событие onclick ие не поддерживает. И это правда что боты не индексят такие ссылки?
2yawa
хороший метод
огромнейшее спасибо, пол часа уже ищу как открыть ссылку на онклик в том же окне
Мне очень пригодилась статья. Автору сайта и автору стаьи спасибо!
Спасибо. Такая ссылка не для поисковиков, а для людей нужна.
одно не пойму, куда люди делись основательные?
одно скажут, про другой очевидный вытекающий вопрос — ноль информации… как подсветить-то в этом случае div при наведении мыши ??? и главное все такие((( умники…
Иди нахуй школолотница, читай маны
Надо будет потренироваться. А то без дивов сейчас никуда. Все современные сайты сейчас с позиционированием блоков и дивов. А то у меня все постаринке на таблицах.
Farid, я с тебя фигею, тебе никто ничего не должен, хоть бы вежливости поучился, прежде чем просить о чем-то.
А тем, у кого не включен javascript в браузере в инете делать нечего, без него даже страница гугла толком не грузится. И это их проблемы. Сейчас почти все сайты используют яву.
Автору спасибо!
Спасибо, наконец-то лого заработало