Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá! A uns dias atrás, eu precisei trocar uma imagem por outra, ao passar o mouse por cima. O William Bruno me ajudou e ficou belezinha! Deu certinho! Mas agora, eu precisava ir além... e não consegui, utilizando o mesmo código.
O que eu preciso fazer agora, é trocar a imagem embaixo de um texto, num link. Vou tentar explicar melhor: Ao passar o mouse por cima do link, escrito em caracteres (não pode ser texto-imagem), a imagem que está embaixo do texto muda (sendo que ela faz parte do link, juntamente com o texto). É como se fosse um botão, levando em consideração que o fundo do botão é uma imagem que muda com o hover.
Levando em consideração também duas situações:
Numa das páginas, as imagens de fundo serão todas iguais, só muda o texto dos botões.
Nas outras páginas, as imagens de fundo mudam de um botão para o outro, de acordo com o texto. São botões temáticos, que possuem imagens de acordo com o tema, e o texto fica sobreposto na imagem.
Com o código abaixo, o texto fica ao lado da imagem, ou abaixo, mas nunca sobreposto.
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var normal = '';
toggle_src( id('a1') );
toggle_src( id('a2') );
toggle_src( id('a3') );
toggle_src( id('a4') );
toggle_src( id('a5') );
}
function id( el ){
return document.getElementById( el );
}
function toggle_src( el ){
el.onmouseover = function(){
normal = this.src;
this.src = this.lowsrc;
}
el.onmouseout = function(){
this.src = normal;
}
}
</script>
</head>
<body>
<a href="index.html" id="divBot1"> <img src="image/1.png" width="57" height="34" border="none" id="a1" alt="Botão para a Página Inicial" lowsrc="imags/1_hover.png"/> </a>
<a href="conteudo01.html" id="divBot2"> <img src="image/2.png" width="70" height="34" border="none" id="a2" alt="" lowsrc="../imags/2_hover.png"/> O Mundo da Matemática </a>
<a href="conteudo02.html" id="divBot3"> <img src="image/3.png" width="276" height="34" border="none" id="a3" alt="" lowsrc="../imags/3_hover.png"/> A Matemática na História </a>
<a href="conteudo03.html" id="divBot4"> <img src="image/4.png" width="276" height="34" border="none" id="a4" alt="" lowsrc="../imags/4_hover.png"/> Escher e os Caleidociclos </a>
</body>
</html>
Tentei usar o <br> entre a tag img e o texto... tentei colocar o texto antes da tag, tentei com o texto depois da tag, mas nada deu certo... Como devo fazer?Grata, desde já!
Carregando comentários...