<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

как сделать круглую ссылку круглой
28.05.2013 19:08:11 как сделать круглую ссылку круглой Сообщение #1
andrey-k

andrey-k

Новичок

Новичок

Дата регистрации:
28.05.2013 18:57:31

Сообщений: 4

Доброго времени суток. Помогите решить проблему. Имеем круглую картинку, которая должна быть ссылкой. необходимо сделать так, чтоб картинка вела себя как круглая, т.е. переход по ссылке и ховер срабатывали только при наведении на видимую круглую часть картинки. Особенность в том, что макет резина и картинка соответственно резина. Помогите пожалуйста.Спасибо.
Профиль Ответить
28.05.2013 19:32:49 как сделать круглую ссылку круглой Сообщение #2
ilyadenisovid

ilyadenisovid

Мастер

Мастер

Дата регистрации:
28.01.2013 18:32:29

Сообщений: 213


<img src = "image.jpg" usemap = "#nameMap" />
<map name = "nameMap">
<area href = "ваша ссылка" shape = "circle" coords = "x, y, r" />
</map>
x - координата Х центра окружности
y - координата У центра окружности
r - радиус окружности
Профиль Ответить
28.05.2013 19:45:11 как сделать круглую ссылку круглой Сообщение #3
andrey-k

andrey-k

Новичок

Новичок

Дата регистрации:
28.05.2013 18:57:31

Сообщений: 4

картинка резина. при изменении разрешения координаты не совпадут с картинкой, так как картинка увеличится
Профиль Ответить
28.05.2013 21:14:40 как сделать круглую ссылку круглой Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Только с помощью CSS3 и свойства border-radius.
Профиль Ответить
28.05.2013 21:33:03 как сделать круглую ссылку круглой Сообщение #5
andrey-k

andrey-k

Новичок

Новичок

Дата регистрации:
28.05.2013 18:57:31

Сообщений: 4

с помощью css3 border-radius стили действительно работают как на круглой картинке, но курсор ведет себя как на квадратной ссылке т.е. реагирует на углы картинки
Профиль Ответить
28.05.2013 21:56:24 как сделать круглую ссылку круглой Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Круглые изображения</title>
<style>
.round {
border-radius: 100px;
border: 3px solid green;
}
.round:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p><img src="images/banner.jpg" alt="" class="round">
<img src="images/banner.jpg" alt="" class="round">
<img src="images/banner.jpg" alt="" class="round"></p>
</body>
</html>
Профиль Ответить
29.05.2013 10:13:51 как сделать круглую ссылку круглой Сообщение #7
andrey-k

andrey-k

Новичок

Новичок

Дата регистрации:
28.05.2013 18:57:31

Сообщений: 4

Спасибо за ответ Михаил, но поинтер начинает срабатывать в углах за пределами бордера, а этого не должно быть,т.к. там прозрачность, как-будто у картинки нет угла - она круглая.
Профиль Ответить
01.06.2013 22:25:42 как сделать круглую ссылку круглой Сообщение #8
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Картинка всегда имеет форму прямоугольника, свойство border-radius делает только видимость закругления, но не меняет прямоугольную форму картинки.

Как приведен пример выше, чтобы гиперссылка была ровным кругом, надо использовать карту изображения. Карта изображения строится на указании координат, а при растягивании изображения координаты остаются на месте.

Если есть какое-то решение, то, наверно, это делается с использованием какого-то скрипта. Ведь чтобы растягивать изображение вы используете какой-то скрипт?
Профиль Ответить