Comando "hover" em header de site

Olá, pessoal. Estou com uma dúvida que, com certeza, diz mais do meu amadorismo do que da dificuldade do processo. Estou querendo realizar um teste em uma página pessoal. Gostaria de aplicar um comando hover na imagem header do site para que, ao passar o mouse, outra imagem apareça. De orelhada, consegui aplicar isso à sidebar (usando simples png's). Mas não consigo o fio da meada para fazer isso na header. Alguém pode me ajudar?

O site-teste é esse aqui: <!-- w -->[url=http://www.locomotive-me.tumblr.com" onclick="window.open(this.href);return false;]www.locomotive-me.tumblr.com[/url]<!-- w --> | Lá vocês podem ver o menu lateral com o comando hover funcionando (toscamente - mas funcionando).

A imagem em png que eu gostaria na header é esta: http://img689.imageshack.us/img689/3977/86761335.png

Desde já, grato!

Oi, Yuri!

Então, o caso é que vc deve usar as pseudo-classes do css.

assim:

No seu código:

<center><a target='_blank' title='Locomotive-me by yuridecastro' href=' www.locomotive-me.tumblr.com/'><img src=' img194.imageshack.us/img194/184/slavekinggodcopycopy.jpg ' border='0'width="970" height= "280"/></a></center>


Coloque a imagem que está dentro do <a> no css, como background. Daí vc coloca o <a> com a pseudo-classe, assim: a:hover .

Na prática:

coloque esse bloquinho no css, tire o "<img src=".....> do <a> e no lugar escreva o nome do site.

<center><a target='_blank' title='Locomotive-me by yuridecastro' href=' www.locomotive-me.tumblr.com/'>LOCOMO.../a></center> ;

Agora no css, vc poe assim:

.header a {
float:left;
width: 970px;
height: 280px;
background: url(" img194.imageshack.us/img194/184/IMAGEM1.jpg'" ;
text-indent: -9999px;
}

.header a:hover {
float:left;
width: 970px;
height: 280px;
background: url(" img194.imageshack.us/img194/184/IMAGEM2.jpg'" ;
text-indent: -9999px;
}


FINITO!

Espero que dê certo, me dá um retorno e a gente ajeita se der um bug.

Boa semana!

Oi, Glaucia! Em primeiro lugar, obrigado pela força. Fiz o que você recomendou. No css, já existia isso:

<style type="text/css">
body {
background-repeat: no-repeat;

{block:IfNotBackgroundImage}
background: {color:Background} top center;
{/block:IfNotBackgroundImage}

{block:IfBackgroundImage}
background: {color:Background} url('{image:Background}') top left fixed;
{/block:IfBackgroundImage}

font-family:Helvetica Neue Arial Lucida, sans-serif;
}

a {
color: {color:Inline Link};
text-decoration: none;
}

a:hover {
text-decoration:underline;
}

h1 {
color: #333333;
padding: 0;
text-size: 100px;
margin-top: 0px;
margin-bottom: -15px;


}

h1 a {
color: {color:Title};
text-decoration: none;
}

.header {
font-family: Helvetica, Neue Arial, Lucida, sans-serif;
margin: 25px 0 50px 0;
width: 100%;

.header {
font-family: Helvetica, Neue Arial, Lucida, sans-serif;
margin: 25px 0 50px 0;
width: 100%;

}
.header h1 {
line-height:56px;
font-size:100px;
font-weight:100;
letter-spacing:-2px;
text-transform:uppercase;
text-align: center;
z-index:-1;
}
.header h1 a {
font-weight:normal;
border:0 !important;
text-decoration: none;
}

.header h2 {
font-family: Helvetica Neue, Arial, Lucida, sans-serif;
color:{color:Description};
font-size:16px;
font-weight:200;
letter-spacing:-1px;
line-height:22px;
text-align:center;
margin-right:55px;

}

.header a {
float:left;
width: 970px;
height: 280px;
background: url(" img689.imageshack.us/img689/3977/86761335.png'" ;
text-indent: -9999px;
}

.header a:hover {
float:left;
width: 970px;
height: 280px;
background: url(" img689.imageshack.us/img689/3977/86761335.png'" ;
text-indent: -9999px;
}

Eu copiei o que você gerou abaixo disso (como pode-se ver) e não deu resultado. O que estou fazendo errado?

Glaucia, mais uma vez, obrigadão!

Mas, Yuri, a imagem do .header a:hover vc não mudou... ela esta igual ... 86761335.png
para dar o efeito hover tem que ser uma imagem diferente...no mesmo tamanho da outra.

E no html, vc tem que tirar o <img...>

Deixa só assim:
<center><a target='_blank' title='Locomotive-me by yuridecastro' href=' www.locomotive-me.tumblr.com/'>LOCOMO.../a></center> ;

Tenta e me fala, abraço!