Всем привет!
Недавно мне понадобилось сделать часть картинки из шапки сайта ссылкой на главную страницу.
Можно было конечно порезать картинку на части и сделать одну из частей ссылкой, но мне этот вариант не подходил.
Поразмыслив, я нашел другой способ сделать кликабельной какую-то область.
Создаем пустой див, задаем ему нужные нам размеры и позиционирование.
Добавляем свойство onClick и все готово.
<div id='header'> <div id='logo' onClick="location.href='/'" > </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, чтобы не пропустить обновления.
Большое спасибо за то, что часто радуете нас результатами своей работы. На этом сайте всегда нахожу что-то полезное для себя. Искренне надеюсь, что продолжите его развивать. Желаю успехов в этом непростом деле.
Согласен с предыдущими мнениями, добавлю в избранное
postseriously спасибо за отзыв. Кстати, на вашем сайте ole4ka.com поехала верстка в мозилле. Причина в том, что объект img в диве «head», больше него по высоте. Чтобы исправить эту проблему поставьте высоту «head» больше или равной высоте вложенного изображения т.е. минимум 283px.
А чего у блога такая посещаемость низкая… Кстати на твой блог порчу навели, помогу снять
microfollowfriday Посещаемость низкая т.к. нет времени наполнять блог. Про порчу улыбнуло))
co-nopay Спасибо.
Чувствуется творческий подход к теме, респект)
Очень жаль у меня так не сделать. мешают другие стили с заданной шириной. =(
Влад а в чем проблема? Используйте area или задай абсолютное позиционирование.
Автор выйди к напроду, вопросы есть!
Вышел. Спрашивайте))
Взгляните пожалуйста на главную страницу сайта la-belle.kz. Как можно реализовать подобное (изменяющий цвет и превращенный в ссылку графический текст, расположенный по кругу)?
СПАСИБО за внимание и обстоятельный ответ!!!
Nadir там все просто — текст сделан картинкой, при наведении картинка меняется. Посмотрите в файрбаге как это реализовано, там все просто — div с меняющимся фоном по событию hover.
Как сделать кликабельным элемент списка ?
Делаю горизонтальное меню списком, нужно чтобы при наведении в область текст ссылки менялся фон внутри элемента li, а при нажатии в область — открывалась нужная страница. Загвоздка именно в том, что не могу сделать эту область кликабельной, при нажатии на сам текст — без проблем
Тут есть несколько вариантов:
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;}
чето не получается в joomla впилить ссылку((((
А что именно не получается? Какие ошибки?
Здравствуйте. Помогите, пожалуйста, написать код. Создала на главной странице сайта полноэкранный слайдер, в котором пролистываются разные картинки. На последнем изображении нужно две определенные области сделать кликабельными. Расположены они на одном уровне внизу, на небольшом расстоянии друг от друга. В этих местах я в фотошопе нарисовала картинки. Буду признательна, если поможете — я только начинаю осваивать азы программирования, поэтому ОЧЕНЬ многого не знаю.
Здравствуйте, Юлия Сергеевна.
В нужном месте вы можете разместить, например, <div></div> задав им необходимые размеры и позиционирование через css. Обработку клика можно добавить либо аттрибутом onclick=»тут ваш обработчик клика», либо через javascript.
Спасибо, разобралась.