andrey-k
Новичок
Дата регистрации:
28.05.2013 18:57:31
Сообщений: 4
Доброго времени суток. Помогите решить проблему. Имеем круглую картинку, которая должна быть ссылкой. необходимо сделать так, чтоб картинка вела себя как круглая, т.е. переход по ссылке и ховер срабатывали только при наведении на видимую круглую часть картинки. Особенность в том, что макет резина и картинка соответственно резина. Помогите пожалуйста.Спасибо.
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 - радиус окружности
andrey-k
Новичок
Дата регистрации:
28.05.2013 18:57:31
Сообщений: 4
картинка резина. при изменении разрешения координаты не совпадут с картинкой, так как картинка увеличится
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Только с помощью CSS3 и свойства border-radius.
andrey-k
Новичок
Дата регистрации:
28.05.2013 18:57:31
Сообщений: 4
с помощью css3 border-radius стили действительно работают как на круглой картинке, но курсор ведет себя как на квадратной ссылке т.е. реагирует на углы картинки
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>
andrey-k
Новичок
Дата регистрации:
28.05.2013 18:57:31
Сообщений: 4
Спасибо за ответ Михаил, но поинтер начинает срабатывать в углах за пределами бордера, а этого не должно быть,т.к. там прозрачность, как-будто у картинки нет угла - она круглая.
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Картинка всегда имеет форму прямоугольника, свойство border-radius делает только видимость закругления, но не меняет прямоугольную форму картинки.
Как приведен пример выше, чтобы гиперссылка была ровным кругом, надо использовать карту изображения. Карта изображения строится на указании координат, а при растягивании изображения координаты остаются на месте.
Если есть какое-то решение, то, наверно, это делается с использованием какого-то скрипта. Ведь чтобы растягивать изображение вы используете какой-то скрипт?
