Проблема с изображениями

[nightgremlin]

У меня маленькая проблема. Есть два изображения mail-1.png и mail-2.png

Я хочу чтобы при наведении курсора на mail-1.png накладывалось(выделялось) другое изображение

Код HTML:

<a href="#" class="mail"><img src="img/mail-1.png"></a>

CSS:

.mail:hover {
background:url(../img/mail-1.png) no-repeat
}

Никакого выделения не происходит, путь к файлу прописан верно, картинки имеют одинаковый размер. Помогите разобраться в чем дело.

Edited November 24, 2011 by nightgremlin

[Softlink]

Т.е. надо чтобы на ховере mail1 менялся на mail2?

[nightgremlin]

Т.е. надо чтобы на ховере mail1 менялся на mail2?

ДА

[Softlink]

Т.е. надо чтобы на ховере mail1 менялся на mail2?

ДА

Тогда оба изображения надо ставить в фон ссылке, а не в img. И лучше спрайтом это сделать.

<a href="#" class="mail">ссылка</a>

.mail{
background:url(../img/mail-1.png) no-repeat;
}

.mail:hover {
background:url(../img/mail-2.png) no-repeat;
}

[nightgremlin]

Тогда оба изображения надо ставить в фон ссылке, а не в img. И лучше спрайтом это сделать.

<a href="#" class="mail">ссылка</a>

.mail{

background:url(../img/mail-1.png) no-repeat;

}

.mail:hover {

background:url(../img/mail-2.png) no-repeat;

}

А если, например код ссылки будет такой:

<a href="#" class="mail"></a>

То есть без текста, будет ли вообще присутствовать какая-либо картинка?

Или можно вместо текста вставить какой-нибудь блок

[gurylyov]

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

Иначе говоря

.mail{
background:url(../img/mail-1.png) no-repeat;
width: ширина px;
height: высота px;
}

[Softlink]

А если, например код ссылки будет такой:

<a href="#" class="mail"></a>

То есть без текста, будет ли вообще присутствовать какая-либо картинка?

Или можно вместо текста вставить какой-нибудь блок

.mail{
display:block;
width:100px;
height:100px;
background:url(../img/mail-1.png) no-repeat;
}

.mail:hover{
background:url(../img/mail-2.png) no-repeat;
}

[nightgremlin]

Спасибо всем! Приду домой буду пробовать. Новый сайт делаю. Может через месяц или раньше выложу для обсуждения.

Вот нашел как при помощи JS сделать:

<a href="javascript:void(0)";
onMouseover="document.im1.src='img/mail-2.png'; return true;" onMouseout="document.im1.src='img/mail-1.png'; return true;">
<img name=im1 SRC="img/mail-1.png" border=0>
</a>

Edited November 24, 2011 by nightgremlin

[Softlink]

Не вижу смысла для этого дела использовать js. Так важно чтобы изображение было вставлено через img?

[nightgremlin]

Не вижу смысла для этого дела использовать js. Так важно чтобы изображение было вставлено через img?

Нет это не столь важно, сделаю через CSS. У меня будет 3 ссылки с меняющимся изображениями в одном блоке. С позиционированием думаю проблем не возникнет.