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

Категории:HTML-верстка
Теги: , , ,

Опубликовано:
08-07-2010

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


HTML:

1
2
3
4
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>

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
<div>
<a href="" style="background-image:url(gli126.gif)"></a>
</div>

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

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

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

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



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

Похожие статьи:


Комментарии:

8 комментариев к теме: “Кроссбраузерное увеличение картинки без javascript”

  1. Chukey дата: 8 июля 2010 в 13:36

    очень удобная штука для портфолио, и без всяких джиквери не плохо смотрится

  2. Chukey дата: 8 июля 2010 в 13:39

    PS. Мне нравится как ты подбираешь картинки))

  3. Masterix дата: 8 июля 2010 в 18:15

    > PS. Мне нравится как ты подбираешь картинки))

    Всмысле? Этот диз я сам рисовал =)

  4. Обучение дайвингу дата: 10 июля 2010 в 11:12

    Классный ресурс…

    …как много в интернете отменных ресурсов! Ваш сайт masterix.com.ua то, что надо……

  5. nanotomorrowyay дата: 10 июля 2010 в 16:40

    Вы не правы. Я уверен. Могу отстоять свою позицию. Пишите мне в PM.

  6. Masterix дата: 10 июля 2010 в 17:41

    Вы о чем? Говорите все здесь. Пусть все знают, может кому-то это будет интересно!

  7. unHootSuite дата: 30 июля 2010 в 9:06

    Так зачитался, что пропустил бы футбол :D

  8. Masterix дата: 31 июля 2010 в 0:11

    =) Я рад, что Вам понравилось читать мои посты =) Буду стараться писать поинтереснее!

Оставить комментарий

*