← Desenvolvimento

efeito

Lida 2458 vezes

Offline

gerardopedro 
Membro
Mensagens 596 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

boas...

como se faz o efeito que ao passar o rato por cima dum link a imagem muda..

mais ou menos como está em http://canalmail.pt/

cumps
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 50
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Deixame ver se ainda tenho isso aki no pc..  :lol:
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 50
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Código: [Seleccione]

<a ONMOUSEOVER="window.status='WEB HOSTING'; changeImages('WEB_HOSTING', 'html/images/WEB-HOSTING-over.gif'); return true;" ONMOUSEOUT="window.status=''; changeImages('WEB_HOSTING', 'html/images/WEB-HOSTING.gif'); return true;" href="planos.php"
<IMG NAME="WEB_HOSTING" SRC="html/images/WEB-HOSTING.gif" WIDTH=123 HEIGHT=35 BORDER=0 ALT="WEB HOSTING"></a></TD>


Tirei isso dum template...e so editares o codigo e ta feito!  :wink:
Offline

Jota 
Editor
Mensagens 773 Gostos 0
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Nao sei porque mas acho que falta ai a funcao do javascript:
changeImages
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 50
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

POiz..
ta aki o codigo certo:

Código: [Seleccione]
<TD COLSPAN=2>
<a ONMOUSEOVER="window.status='WEB HOSTING'; changeImages('WEB_HOSTING', 'html/images/WEB-HOSTING-over.gif'); return true;" ONMOUSEOUT="window.status=''; changeImages('WEB_HOSTING', 'html/images/WEB-HOSTING.gif'); return true;" href="planos.php">
<IMG NAME="WEB_HOSTING" SRC="html/images/WEB-HOSTING.gif" WIDTH=123 HEIGHT=35 BORDER=0 ALT="WEB HOSTING"></a></TD>
Offline

MarKo 
Administrador
Mensagens 4610 Gostos 10
Feedback +1

Troféus totais: 37
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter 10 Polls Poll Starter

Jota, mais um bom tutorial para ti! :P
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 50
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Por acaso era um bom tutorial  :lol:
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Experimenta isto:
Código: [Seleccione]
<img src="imagens/botao0.gif" alt="" name="nome1" onMouseOver="document.nome1.src='imagens/botao1.gif'" onMouseOut="document.nome1.src='imagens/botao0.gif'">

Tive que fazer isso porque se fizermos automaticamente isso usando o Dreamweaver ele põe lá código que nunca mais acaba.
Offline

kebrus 
Membro
Mensagens 459 Gostos 0
Troféus totais: 25
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

a solução do Ricardo75 é mais simples, tb utilizo isso em conjunção com um pequeno script que faz o "preload" das imagens, pois senão dependendo do user e da sua net, quando ele passa por cima do butao, ele pode ainda está a carregar a imagem, o que é um bocado chato

Código: [Seleccione]
var Pic = new Array

Pic[0] = 'image.png'
Pic[1] = 'imageover.png'
Pic[2] = 'imagedown.png'


var p = Pic.length
var preLoad = new Array()
var i = 0;
for (i = 0; i < p; i++){
     preLoad[i] = new Image()
     preLoad[i].src = Pic[i]
}

é só ir indo adicionando mais Pic
  • = ''; para ele carregar essas tb