Alterar imagem/texto quando se passa com o rato por cima de um link

[dragao-azul]

Boas,

Estou a fazer uma página web e gostava de saber como se faz uma coisa:

Ainda não tenho bem definido como vai ser, mas deixo aqui as hipóteses em que tou a pensar e peço-vos ajuda em como meter todas a funcionar, depois vejo o aspecto de cada uma e escolho.

É assim, queria que quando o rato passa-se sobre um link uma imagem, ou um texto nesse link se alterasse.

As hipóteses que tenho em cima da mesa são:

- Imagem de fundo sempre a mesma, link em texto, quando passo com o rato o texto altera-se (não a formatação, isso sei alterar, queria que por exemplo aparecessem umas >> atrás do texto)

- Texto sempre o mesmo, mas imagem de fundo do link alterava (supondo que tenho o link numa tabela e que cada célula é um link)

- Link na a forma de imagem, quando passa o rato por cima a imagem altera-se.

Como posso fazer isto?

Tenho um script bastante antigo e um pouco complicado para esta ultima hipótese, procurava algo mais recente.

O script que tenho para trocar imagens é este:

<script LANGUAGE="JavaScript">

aa_over = new Image(); aa_over.src = "principal/botoes/bot_inf_over.gif";    
aa_out = new Image();  aa_out.src = "principal/botoes/bot_inf.gif";

bb_over = new Image(); bb_over.src = "principal/botoes/bot_contacto_over.gif";    
bb_out = new Image();  bb_out.src = "principal/botoes/bot_contacto.gif";

function rato_over(imgName){ 
img1 = eval(imgName + "_over.src"); document[imgName].src = img1;
}

function rato_out(imgName){ 
img2 = eval(imgName + "_out.src"); document[imgName].src = img2;
}

</script>

  <tr>
  <td valign="bottom"><p align="center"><a href="inf.php" onMouseOver="rato_over ('aa');window.status='';return true" onMouseOut="rato_out ('aa');window.status='';return true">
    <img src="principal/botoes/bot_inf.gif" NAME="aa" width="118" height="26" border="0"></td>
  </tr>
  <tr>
  <td valign="bottom"><p align="center"><a href="contactos.php" onMouseOver="rato_over ('bb');window.status='';return true" onMouseOut="rato_out ('bb');window.status='';return true">
    <img src="principal/botoes/bot_contacto.gif" NAME="bb" width="118" height="26" border="0"></td>
  </tr>

Thz

 

[Frapp_girl]

O que sugeria era fazeres uma imagem que quando passas o rato por cima altera a mesma.
Ora isso no Dreamweaver é extremamente fácil de fazer. Basta inserires uma Rollover Image onde escolhes a imagem que aparece por omissão e a segunda imagem/ alternativa que aparece ao passar do rato.

Espero ter ajudado

 

[dragao-azul]

Isso é o que tenho actualmente.. Mas desconhecia esta função do dreamweaver, torna tudo mais fácil, talvez use imagens, também já percebo um pouco mais de photoshop para fazer uns modelos decentes.

Seja como for gostava de saber como fazer para alterar o texto quando o rato passa por cima.. A imagem de background tendo esta maneira simples já não se justifica. è mesmo só curiosidade pode-me vir a ser útil.

Thz