Кроссбраузерное увеличение картинки без javascript

8 Июль, 2010

Сегодня я опубликую довольно простой но в то же время интересный урок. Метод является кроссбраузерным, поддерживается как IE так и всеми остальными браузерами. Мы составим небольшую галерею картинок и при наведении картинка будет увеличиваться. Не плавно, как с помощью jquery, но все же без скрипта, а это значит что работу сайта не будет замедлять.Собственно от теории перейдем к практике:

HTML:

1
2
3
4

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

div{
position:relative;
width:300px;
height:300px; \\ задаем высоту и гирину блока, в котором будет распологаться картинка-ссылка
float:left;
}
div a{
display:block; \\ делаем ссылку блочным элементом, что бы для IE все отображалось правильно
position:absolute;
top:50%;
left:50%; \\ центрируем фон картинки-ссылки по середине блока
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
border:none;
background-repeat:no-repeat;
background-image:url(gli126.gif);
}
div a:hover{
margin-left:-150px;
margin-top:-150px;
width:300px;
height:300px;
}

Если Вам нужно динамически менять картинки можно убрать параметр

1	background-image:url(gli126.gif);

в файле стилей и для каждой картинки-ссылки поставить свой определенный параметр, к примеру вот так:

1
2
3

Соответственно вместо url(gli126.gif) ставите php код – путь к картинке.

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

Пример можно посмотреть здесь.

Если Вам понравилась статья и Вы хотите следить за обновлениями в блоге, то подписывайтесь через RSS, становитесь моим фолоувером в twitter. Возможно Вы желаете получать обновления себе на мыло? Подписуйтесь на RSS2E-mail. Так же, возможно, Вы хотите разместить постовые или любые другие виды рекламы. В таком случае пишите мне на ICQ:451240340

А Вы не желаете купить участки под строительство в Праге? Говорят, что Прага один из красивейших городов Европы! Как бы я хотел жить в старинной праге. Эти улочки, этот запах старины, эти традиции, это пиво..ммм =)