Jump to content

  2. →
  3. →

Photo

Muda Imagem Com Mouse Em Cima

Started By Dami Izolan, 20/09/2003, 18:25

  • Faça o login para participar
10 replies to this topic

#1 Dami Izolan

Dami Izolan

    It's me!

  • Usuários
  • 212 posts
  • Sexo:Não informado
  • Localidade:Curitiba/PR - Brasil
  • Interesses:Arte digital, mulheres, carros.

Posted 20/09/2003, 18:25

Aeee... Montei um código q qdo a gente passa o mouse em cima de uma figura, ela vira outra... E to passando ele com as tags html de uma página básica pra vcs saberem onde por os códigos. Os que estão em maíusculo são as partes editáveis. 

<html>
<head>
<title>Passa o mouse em cima e troca a figura</title>

<!-- PARTE 1 COMEÇA AQUI -->
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
<!-- PARTE 1 TERMINA AQUI -->

</head>

<!-- PARTE 2 COMEÇA AQUI -->
<body onload="dynAnimation()" language="Javascript1.2">
<p>
<a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
<img border="0" src="LINK DA IMAGEM 1" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="LINK DA IMAGEM 2" width="LARGURA DA IMAGEM EM PIXELS" height="ALTURA DA IMAGEM EM PIXELS"></a></p>
<!-- PARTE 2 TERMINA AQUI -->

</body>
</html>

Espero ter ajudado! Se tiver algo errado, só avise!
"A tradição é a personalidade dos imbecis." (Albert Einstein)

#2 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 20/09/2003, 18:40

Mais simples:

<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">


Edição feita por: Cristiano, 20/09/2003, 18:46.

Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#3 nick171

nick171

    <? if => erro ?>

  • Usuários
  • 612 posts
  • Sexo:Não informado

Posted 20/09/2003, 18:56

Eita, s/ comentários
hehehe
Nícolas Vieira Rossett


"O maior segredo da vida é que a mesma não é um processo de descoberta, mas sim de criação.
Você não está se descobrindo, mas se recriando.
Por isso não tente descobrir quem você é, mas busque determinar... "Quem você quer ser"!!!

#4 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 20/09/2003, 19:10

Eu vim ler aki de novo e tem algo de errado sim, esse código aíparece mais aqueles gerados pelo FrontPage... ;)

Existem uma chamada de JS sem lógica aki: <script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">

Sem falar que o código está todo poluido...

Edição feita por: Cristiano, 20/09/2003, 19:11.

Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#5 sdn

sdn

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 21/09/2003, 00:20

Eu vim ler aki de novo e tem algo de errado sim, esse código aíparece mais aqueles gerados pelo FrontPage... ;)

Existem uma chamada de JS sem lógica aki: <script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">

Sem falar que o código está todo poluido...

Ueh cara, :huh:
Despoluia o codigo aew entao cara ... faz esse favor por nos .... :lol:

Se não der, alguem aew sabe ? :blink:

Valeu, ateh mais galera ....

Desde já grato, (y)

#6 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 21/09/2003, 00:24

Simples, como já falei use:

<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">


Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#7 camarão

camarão
  • Visitantes

Posted 21/09/2003, 01:44

cristiano vc resumiu mesmo hein......tipow isso achuq é akela tal de img cambiavel do dremwevar e só pra vc ver olha o tamanho do codigo dela no dream

<html>
<head>
<title>Documento sem t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('img2.gif')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img2.gif',1)"><img name="Image1" border="0" src="img1.gif"></a>
</body>
</html>


#8 Skuall

Skuall

    Doutor

  • Usuários
  • 968 posts
  • Sexo:Não informado

Posted 21/09/2003, 11:10

Olá! :yes:

Metodicamente o efeito é o mesmo... Com exceção ao Fato que o DW Pré-Carrega a Figura para o Efeito.

#9 Guest

Guest
  • Visitantes

Posted 21/09/2003, 18:05

Aeee... Montei um código q qdo a gente passa o mouse em cima de uma figura, ela vira outra... E to passando ele com as tags html de uma página básica pra vcs saberem onde por os códigos. Os que estão em maíusculo são as partes editáveis. 

<html>
<head>
<title>Passa o mouse em cima e troca a figura</title>

<!-- PARTE 1 COMEÇA AQUI -->
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
<!-- PARTE 1 TERMINA AQUI -->

</head>

<!-- PARTE 2 COMEÇA AQUI -->
<body onload="dynAnimation()" language="Javascript1.2">
<p>
<a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
<img border="0" src="LINK DA IMAGEM 1" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="LINK DA IMAGEM 2" width="LARGURA DA IMAGEM EM PIXELS" height="ALTURA DA IMAGEM EM PIXELS"></a></p>
<!-- PARTE 2 TERMINA AQUI -->

</body>
</html>

Espero ter ajudado! Se tiver algo errado, só avise!

Legal kra aki deu certinho
mais vc sabe como eu faço para o link abrir em pop up 500 x 600 sem barra de end.????

#10 Dami Izolan

Dami Izolan

    It's me!

  • Usuários
  • 212 posts
  • Sexo:Não informado
  • Localidade:Curitiba/PR - Brasil
  • Interesses:Arte digital, mulheres, carros.

Posted 27/09/2003, 00:36

Eu vim ler aki de novo e tem algo de errado sim, esse código aíparece mais aqueles gerados pelo FrontPage... ;)

Existem uma chamada de JS sem lógica aki: <script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">

Sem falar que o código está todo poluido...

O pior é q parece mesmo ae... Eu peguei um tuto na internet (não me lembro aonde) e fui montando... Vlw pela dica ;)
"A tradição é a personalidade dos imbecis." (Albert Einstein)

#11 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 27/09/2003, 14:15

O precarregamento que o Dream faz é tão tosco que nem compensa comentar...

O fato é que ele é incapaz de criar um código suficientemente enxuto para ser adicionado e rodar em browsers mais antigos.
Este código abaixo funciona no NN2+ e IE3+ (ambos já pré-históricos).

function rollOver( sEl, sImg ) {
  // Preload e caching da imagem
  var imagem = new Image(200, 300);
  imagem.src = sImg;
  
  // Fazendo a alteração da imagem
  document.images[sEl].src = imagem.src;
}

Para usar:

<a onmouseover="rollOver('img_name', 'btn-on.gif');" onmouseout="rollOver('img_name', 'btn-off.gif');">Roll Over</a>
<img name="img_name" src="btn-off.gif">

Outro meio de usar:

<img name="img_name" src="btn-off.gif" onmouseover="rollOver('img_name', 'btn-on.gif');" onmouseout="rollOver('img_name', 'btn-off.gif');">

Ou aida, se você for usar o rollOver somente no próprio elemento (ou seja, referência a ele mesmo), modifique a função para:

function rollOver( sEl, sImg ) {
  // Preload e caching da imagem
  var imagem = new Image(200, 300);
  imagem.src = sImg;
  
  // Fazendo a alteração da imagem
  sEl.src = imagem.src;
}

E utilize assim:

<img name="img_name" src="btn-off.gif" onmouseover="rollOver(this, 'btn-on.gif');" onmouseout="rollOver(this, 'btn-off.gif');">


Agora avalie o código do DreamWeaver e avalie este aqui... qual deles é mais enxuto? Ambos fazem a mesma coisa (preloading e caching) e ambos produzem o mesmo efeito (rollOver de imagens). Agora eu pergunto: Você prefere usar um código de 4 kb ou um de 1kb?


[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
Voltar para Javascript / DOM / AJAX / ECMAScript


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Javascript / DOM / AJAX / ECMAScript
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq