Смена картинки, которой задается ссылка на другую картинку с использованием css

@WeSTy · Регистрация: 15.03.2013

Author24 — интернет-сервис помощи студентам

Всем привет! Начал вспоминать изученное раньше по css, но вот забыл как это можно реализовать.

Помогите кто может.

Вот код:

HTML5

1
2
3

<div class="header">
            <p><a href="sait.ru"><img src="http://calculator.hol.es/i2.jpg" class="shapka-logo"></a></p>
</div>

Вот css от него:

CSS

        .header{
                width:100%;
                height:450px;
            }
            .shapka-logo{
            position:inherit;
                height:140px;
                }
            .shapka-logo:hover{
                url([url]http://calculator.hol.es/i.jpg[/url]) no-repeat left;
            }

Заранее спасибо!

@Academik · 11.04.2013, 22:21

Я бы сделал так:

CSS

1 2	.header a{width: 100px; height: 100px; background: url('i2.jpg'); display: block;} .header a:hover{background: url('i3.jpg');}

HTML5

1
2
3

<div class="header">
            <a href="sait.ru"></a>
</div>

Соответственно ширину и высоту задаём как у картинки. При наведении меняем картинку с такими же размерами.

@WeSTy · 11.04.2013, 23:28 **[ТС]**

Спасибо большое за помощь!

@Academik · 12.04.2013, 12:02

А лучше использовать спрайты, потому как при наведении (первый раз) картинка моргать будет.

Добавлено через 2 минуты
Соответственно пример:

CSS

1 2	.header a{width: 100px; height: 100px; background: url('i2.jpg') 0 0 no-repeat; display: block;} .header a:hover{background-position: 0 -100px;}

Тут приведён пример картинки, размер которой 100х200.

@WeSTy 1 / 1 / 0 Регистрация: 15.03.2013 Сообщений: 62
	11.04.2013, 23:28 [ТС]	3
	Спасибо большое за помощь! 0

	12.04.2013, 12:02