← HTML + CSS

Html image mouseover

Lida 20348 vezes

Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Tens de ter o markup correcto...

no header ou no ficheiro .css colocas o css será qualquer coisa do género:

Código: (css) [Seleccione]
.div_xpto {
background: url("imagem.png");
}
.div_xpto:hover {
background: url("imagem.png");
}
.div_xpto2 {
background: url("imagem.png");
}
.div_xpto2:hover {
background: url("imagem.png");
}

Depois o html será algo do género

Código: (html4strict) [Seleccione]
<div class="div_xpto"></div>
<div class="div_xpto2"></div>

Dúvidas?
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Coloquei isto no widget e não funcionou:

Código: [Seleccione]
<style>.div_redl {
background: url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k1.png");
}
.div_redl:hover {
background: url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k2.png");
}</style>
<div class="div_redl"></div>

 :-k
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

tens que definir o tamanho da div e a posição da imagem no background

.div_xpto {
width: 999px;
height: 999px;
background: transparent url("imagem.png") 0 0 no-repeat;
}

Se colocasses o css no ficheiro de css, era melhor. Nada como experimentar e aprender.


Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Nunca toquei muito no css.

Código usado no css:
Código: [Seleccione]
.div_redl:hover {
width: 139px;
height: 59px;
background: url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k2.png");
}
.div_redl {
width: 139px;
height: 59px;
background: transparent url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k1.png") 0 0 no-repeat;
}

No widget meti só <div class="div_redl"></div> (que supostamente chama a div_redl do css, certo?)
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Foi ao site e está a funcionar...
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Foi ao site e está a funcionar...

Pois está! Não conseguia ver (devia ser a cache).
 :obrigado:
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Boa noite,

Estou a precisar novamente disto, mas, desta vez, apenas com uma imagem.

Segui este tutorial (não muito completo), no entanto, quando passo o rato por cima, a imagem não se move como esperado.

Tenho o seguinte código css:

Código: [Seleccione]
.botaoHome {
display: block;
width: 37px;
height: 37px;
background: url("http://estudantevirtual.com/wp-content/uploads/2012/04/nav_final.png") 0 0;
text-indent: -99999px;
}
.butaoHome:hover {
background-position 0 -38px;
}

Html:

Código: [Seleccione]
<p><a class="botaoHome" href="estudantevirtual.com">Home</a></p>
Obrigado,
Nuno
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Tens isso online Nuno?
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Como queres que ela mova?
Offline

rabbitgirl 
Membro
Mensagens 1 Gostos 0
Troféus totais: 14
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 First Post Signature Karma Webmaster Avatar

oh, eu pensei que era um efeito interessante, vou tentar seguir. Obrigado