И еще раз про анимированные ссылки

Вячеслав Гринин, February 20, 2009

Не так давно наш веб-дизайнер в своей статье Трюк со ссылкой – показываем картинку рассказал нам о том, как сделать красивую анимированную ссылку. Однако предложенное решение обладает одним недостатком – клик на подобной ссылке не срабатывает в IE. Ну, не воспринимает он SPAN вложенный в ссылку, так как нам хотелось бы. Клик на такой ссылке не срабатывает, даже курсор мыши остается обычной “умолчательной стрелкой”.

Ну, допустим, с курсором справиться проще всего, задав SPAN’у стиль cursor:pointer. Остается заставить IE правильно отрабатывать клики на подобных конструкциях.

Решение оказалось достаточно простым, правда чтобы сделать это нужно быть немного программистом. Для этого ссылка вместо конструкции <a href=”portfolio.html”>, приобретает чуть более сложный вид: <a href=”javascript:void(0)” onclick=”window.location=’portfolio.html’”>.

Как видим, здесь все очень просто. Событие onclick браузер отрабатывает нормально, а мы этим и воспользовались, по щелчку мыши свойству window.location присваивается значение ‘portfolio.html’, то есть как раз та самая ссылка, переход на которую нужно обеспечить. Атрибут href содержит теперь значение javascript:void(0), по сути, это пустой оператор, который в данном случае блокирует стандартное поведение браузера при переходе по ссылке.

А вот и весь текст этого трюка:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Анимированная ссылка</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style type=”text/css”>
img {
border: 0px;
}

a span {
display: none;
}

a:hover #port1 {
display: inline;
position: absolute;
margin-left: -1px;
margin-top: -1px;
}

#port1 {
cursor: pointer;
}
</style>
</head>
<body>
<div id=”img1″><a href=”javascript:void(0)” onclick=”window.location=’portfolio.html’”><span id=”port1″><img src=”portfolio_big.png” alt=”" /></span><img src=”portfolio.png” alt=”" /></a></div>
</body>
</html>

В тему:

1комментарий

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

я на места portfolio_big.png и portfolio.png вставил свои картинки, и переименовал соответственно своему portfolio.html файл, при открытии картинки не отобразаются.

Андрей, February 18, 2010 1:05 pm Reply
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: