Заменяющиеся картинки

[W. Watson]

Хочу сделать такую хрень: есть меню, берём в пример раздел "Новости", там картинка "Новости".png

Как прописать в ЦСС так, чтобы при наведение на эту картинку появлялась другая?

Знаю,

a:link, a:visited { background-image: url('image1.gif'); }

a:active, a:hover { background-image: url('image2.gif'); }

только как это "умно" применить?

Например:

<div id="news"><a href="index.php?case=news"><img src="i/news.png" /></a></div>

к нему цсс:

#news

{

a:link, a:visited { background-image: url('news1.png'); }

a:active, a:hover { background-image: url('news2.png'); }

}

Так у меня ЕСТЕССТВЕННО не пашет)) Объясните дураку как надо))

Edited October 31, 2008 by W. Watson

[ZoNT]

#news a:link,

#news a:visited { background-image: url('news1.png'); }

#news a:active,

#news a:hover { background-image: url('news2.png'); }

[W. Watson]

#news a:link,

#news a:visited { background-image: url('news1.png'); }

#news a:active,

#news a:hover { background-image: url('news2.png'); }

А почему так? Нельзя ли это как нибудь сократить? Просто если у меня этих разделов штук 10, то сколько-ж это кода-то..

Edited October 31, 2008 by W. Watson

[W. Watson]

Вот, мой код:

<div id="b_news"><a href="index.php?case=news"><img src="./img/b_news.png" alt="Íàøè íîâîñòè"></a></div>

#b_news {position: absolute; left: 15px; top: 20px;}

#b_news a:link,

#b_news a:visited {background-image:url('./img/b_news.png');}

#b_news a:active,

#b_news a:hover {background-image:url('./img/b_news2.png');}

Он вставляет <img src="./img/b_news.png" alt="Íàøè íîâîñòè">, и под ней то, что в цсс прописано. Как это исправить?

[Silverwind]

Вот, мой код:

<div id="b_news"><a href="index.php?case=news"><img src="./img/b_news.png" alt="Íàøè íîâîñòè"></a></div>

#b_news {position: absolute; left: 15px; top: 20px;}

#b_news a:link,

#b_news a:visited {background-image:url('./img/b_news.png');}

#b_news a:active,

#b_news a:hover {background-image:url('./img/b_news2.png');}

Он вставляет <img src="./img/b_news.png" alt="Íàøè íîâîñòè">, и под ней то, что в цсс прописано. Как это исправить?

Читаем код:

#b_news a:link,
#b_news a:visited {background-image:url('./img/b_news.png');

в блоке с id=b_news, есть тег якоря, которому устанавливаем фон картинкой.

<a href="index.php?case=news"><img src="./img/b_news.png" alt="Íàøè íîâîñòè"></a>

В тег якоря (у которого, как мы до этого выяснили, есть фон вставляем картинку. Поверх этого фона.

Так что в итоге получаем именно то, что и написали: Он вставляет <img src="./img/b_news.png" alt="Íàøè íîâîñòè">, и под ней то, что в цсс прописано.

Как исправить, думаю, понятно?

[W. Watson]

Маленько не допёр, туповат... Что такое тег якоря? Напиши лучше целиком код, как он должен выглядеть. Я просто ещё ламер в этом деле, и буду очень благодарен...

ЗЫ: Если честно, то я по твоим словам понял, что всё и так должно работать...

Edited November 4, 2008 by W. Watson

[Silverwind]

Маленько не допёр, туповат... Что такое тег якоря? Напиши лучше целиком код, как он должен выглядеть. Я просто ещё ламер в этом деле, и буду очень благодарен...

ЗЫ: Если честно, то я по твоим словам понял, что всё и так должно работать...

Тег якоря - это тег <a> (Anchor = Якорь, недаром этот тег изображают в виде якоря).

По моим словам выходит то, что работает именно так, как ты написал код. Ошибка у тебя в коде в том, что ты поверх заменяющихся картинок ставишь картинку статичную. Убери <img src="./img/b_news.png" alt="Íàøè íîâîñòè">, задай в CSS тегу "а" размеры width и height, равные ширине и высоте картинки b_news.png и у тебя все получится как надо. Код примерно такой будет:

#b_news {position: absolute; left: 15px; top: 20px;}
#b_news a:link,
#b_news a:visited {background-image:url('./img/b_news.png'); width: 100px; height: 20px;}
#b_news a:active,
#b_news a:hover {background-image:url('./img/b_news2.png');}

<div id="b_news"><a href="index.php?case=news">новости</a></div>

[W. Watson]

Не работает, посмотри в чём косяк?

http://www.jam-tver.com/test.html

Если я уберу надпись "Наши новости" в

<div id="b_news"><a href="index.php?case=news">новости</a></div>

то вообще ничего не показывает...

Edited November 6, 2008 by W. Watson

[Silverwind]

Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<head> 
<title>Джем раньше - тест</title> 
<link href="style3ex.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="b_news"><a href="index.php?case=news"></a></div> 
</body> 
</HTML>

CSS:

body
{
background: black url('./img/background.jpg') no-repeat;
color: white;
font-family: "trebuchet ms", sans-serif;
margin: 0px;
}

:link {color:white}
:visited {color:#C1C1C1}
:hover {color:red}
:active {color:#BCBCBC}

#b_news {position: absolute; left: 15px; top: 20px;}
#b_news a {width:118px; height:39px;}
#b_news a:link,
#b_news a:visited {background-image:url('./img/b_news.png');}
#b_news a:active,
#b_news a:hover {background-image:url('./img/b_news2.png');}

Картинка b_news2.png у тебя отсутствует.

[W. Watson]

Вставил твой код, все картинки на месте... Ничего не работает...

[Silverwind]

Блин...

Вот тебе рабочий код на ссылки.

#b_news {
position: absolute; 
left: 15px; 
top: 20px;
}
#b_news a {
display: block; 
width:118px; 
height:39px;
background-image:url('b_news.png');
}
#b_news a:hover {background-image:url('b_news2.png');}

[W. Watson]

Во, пашет! Спасибо огромное!!!

А как теперь сделать, чтобы ALT="" работал? Ведь без картинок не видно ничего?

[Silverwind]

http://www.htmlbook.ru/html/a.html