Encontrei uma função que gostaria de aplicar na minha página. Ela faz com que um ícone e uma imagem sejam simultaneamente trocadas por outras quando o mouse passa por cima do ícone e restaura o estdo original de ambas quando se tira o cursor do mesmo, como pode ser conferido no exemplo:
http://www.darkpandabr.com/teste2/
(passem o mouse nos ícones; eles trocam de cor e uma opção aparece na parte superior da tela).
Analisei o código, vi como funciona e apliquei na minha página:
http://www.darkpanda...te/port-00.html
(só no primeiro quadrado)
O problema é que só ocorre o swap da primeira (ícone) e o da segunda não (que é o fundo onde tem a pata).
O código original é esse:
<script language="JavaScript">
var TabImg = new Array();
function preloadImg()
{var pic=preloadImg.arguments;for (var i=0;i<pic.length;i++){TabImg[i]=new Image;TabImg[i].src="images/"+pic[i]+".jpg";}}
preloadImg("te2","te3","tg2","ti2","tk2","tm2");
function On(img)
{document.images[img].src="images/"+img+"a.jpg";document.images["titre"].src="images/t"+img+".jpg";}
function Off(img)
{document.images[img].src="images/"+img+".jpg";document.images["titre"].src="images/vide.bmp";}
</script>
No HTML original esta assim:
<td colspan=2><a href=# onMouseOver="On('e2')" onMouseOut="Off('e2')"><img name=e2 src=images/e2.jpg width=28 height=45></a></td>
Minha adaptação ficou assim:
var TabImg = new Array();
function preloadImg()
{var pic=preloadImg.arguments;for (var i=0;i<pic.length;i++){TabImg[i]=new Image;TabImg[i].src="images/"+pic[i]+".jpg";}}
preloadImg("port-00_08t");
function On(img)
{document.images[img].src="images/"+img+"s.jpg";document.images["titre"].src="images/"+img+"t.jpg";}
function Off(img)
{document.images[img].src="images/"+img+".jpg";document.images["titre"].src="images/port-00_03.jpg";}
Onde, pelo que entendi; port-00_03.jpg = fundo / images/"+img+"s.jpg" são as imagens que farão o swap (nome da img +s .jpg ) / images/"+img+"t.jpg são as imagens - fundo - que farão o swap (nome da img +t .jpg )
No meu HTML deixei assim:
<div class="ts-3-8"><a href=# onMouseOver="On('port-00_08')" onMouseOut="Off('port-00_08')"><img src=images/port-00_08.jpg name=port-00_08 width=87 height=85 border="0"></a></div>
Será que alguém consegue dar uma força para encontrar o erro?
Desde já, grato pela atenção dispensada.
Fuçando um pouco, vi que o Dreamwever "estranhou" o fato das imagens terem hífen e, por este motivo, não queria nomeá-las; troquei todos os hífens por underline, mas parece que essa não é a causa da falta de funcionalidade de parte do código...
Edição feita por: Dark Panda, 11/03/2010, 17:37.
