Отправляет email-рассылки с помощью сервиса Sendsay

Веб-разработка: пособие начинающим

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
09.02.2009
23:47:44
23:56:02
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Александр Левитас

Статистика

10.726 подписчиков
-23 за неделю
←   Все выпуски   →

Веб-разработка? Это просто! И еще раз про анимированные ссылки


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

Не так давно наш веб-дизайнер в своей статье "Трюк со ссылкой – показываем картинку" рассказал нам о том, как сделать красивую анимированную ссылку. Однако предложенное решение обладает одним недостатком - клик на подобной ссылке не срабатывает в 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>

Статью "И еще раз про анимированные ссылки", и множество других полезных статей о веб-разработке Вы можете прочитать на нашем сайте "Веб-разработка? Это просто!"

В избранное