Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Annes

[Resolvido] importante sobre JS

Por , em Javascript

Recommended Posts

Annes    1

Annes
Postado

Olá! Gostaria de saber se alguém pode "traduzir" o código abaixo para mim. É o seguinte: sou designer, e como sabemos, designers são péssimos programadores... Porém, de uns tempos pra cá, estou me interessando pela área de programação também. Além disso, aqui no meu trabalho, estão solicitando algunas coisas codificadas para mim, o que antes não ocorria, pois havia um programador. Como ele saiu, veio tudo pra cima da minha cabeça!!! No início, eu estava irritada, pois não compreendia muita coisa, mas agora, estou começando a entender. HTML e CSS já não são mais segredos para mim (mas antes parecia um bicho de 7 cabeças). Já na questão de programação, ainda tenho dificuldades. Um rapaz tentou me ajudar, colocando algo de jquery, mas não deu certo...

 

O código abaixo, foi feito pelo FireWorks, mas eu queria entender o que ele significa, para ver se eu consigo criar, baseada nele, códigos parecidos para realizar o que ele faz. Pra ser sincera, não gosto de Fireworks nem dreamweaver... acho que eles geram muito código desnecessário!

 

Este código substitui uma imagem por outra, quando passamos o mouse por cima, num link. Mas eu gostaria de uma explicação detalhada sobre o que ele vai fazendo, quais as variáveis, onde elas estão sendo declaradas, modificadas, chamadas, etc...

 

<script language="JavaScript1.2" type="text/javascript">
<!--
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];}
}
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];}}
}

//-->
</script>

O pedaço do HTML onde essas funções são chamadas, é o seguinte:

 

<a href="home.html" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('a1','','1.png',1);">
<img name="a1" src="spacer.gif" width="75" height="58" border="0" id="a1" alt="Botão para a Página Inicial" /></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

muito dificil decifrar esse código.. mais fácil partir do zero e criar outro.

 

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
	var a1 = document.getElementById('a1');
	a1.onmouseover = function()
	{
		this.src = 'hover.jpg';
	}
	a1.onmouseout = function()
	{
		this.src = 'normal.jpg';		
	}
}
</script> 
</head>
<body>
	<a href="home.html">
		<img src="normal.jpg" width="75" id="a1" height="58" alt="Botão para a Página Inicial" /></a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Gostei do código, Bruno... e nem é necessário explicá-lo... pois ele é auto-explicativo!

 

Muitíssimo obrigada... Era isso mesmo que eu queria... um código mais fácil e mais limpo, que eu possa utilizar em diversas situações.

 

Queria tbm saber se, no mesmo html eu tiver outras imagens com este mesmo efeito, como devo fazer? Tenho que declarar todas as variáveis, por exeplo: a1, a2, a3... ou posso usar a var a1 pra todas as imagens?

 

Obrigada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bom e simples mesmo Bruno, Annes para pegar varias imagens pode-se usar assim:

<html>
<head>
<script type="text/javascript">
window.onload = function(){
        var a1 = document.getElementsByTagName('img');
        for(var i=0;i<a1.length;i++){
                if(a1[i].className=='TROCA'){
                        a1[i].onmouseover = function(){
                                this.src = 'hover.jpg';
                        };
                        a1[i].onmouseout = function(){
                                this.src = 'normal.jpg';
                        };
                }
        }
};
</script> 
</head>
<body>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
</body>
</html>

[editado]

Estude esses links amigo:

https://developer.mozilla.org/en/DOM/element.getElementsByTagName

http://www.w3schools.com/jsref/dom_obj_document.asp

 

[editado]

Código corrigido

 

Atenciosamente Silverfox

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Guilherme, será que você pode explicar resumidamente pra mim o que acontece nas linhas que eu recortei abaixo?

 

	for(var i=0;i<a1.length;i++){
		if(a1[i].className=='TROCA'){
		}
       };

Aqui, eu gostaria de saber se esta class precisa ser colocada no css também ou só no js já é o suficiente...

 


<body>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
</body>
</html>

Sei que você me indicou uns links para estudar... mas é que isso requer um certo tempo... Eu vou estudá-los, mas no momento, preciso disso com uma certa urgência, e nada melhor do que respostas objetivas dadas a perguntas específicas... como vcs dois estão fazendo...

 

AH... IMPORTANTE... Tentei fazer o que você sugeriu, mas não deu certo... por que?

 

Muito obrigada...

 

Ficou assim meu código:

 

<html>
<head>
<script type="text/javascript">
	window.onload = function()
	{
        var a1 = document.getElementById('img');
        for(var i=0;i<a1.length;i++){
                if(a1[i].className=='TROCA'){
        a1[i].onmouseover = function()
        {
                this.src = 'imags/1.png';
        }
        a1[i].onmouseout = function()
        {
                this.src = 'imags/icone_home.png';                
        };
                }
        }
};
</script>
</head>

<body>
     <a href="index.html" id="divBotMtr"> <img src="imags/icone_home.png" class="TROCA" width="75" border="none" id="a1" height="58" alt="Botão para a Página Inicial" /> <h1> Home </h1> </a>
</body>

mas não deu certo... tem algum erro? Posso ter errado alguma coisa na hora de fazer as alterações...

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Desculpe coloquei dois onmouseover um deveria ser mouseout, código corrigido:

<html>
<head>
<script type="text/javascript">
window.onload = function(){
        var a1 = document.getElementsByTagName('img');
        for(var i=0;i<a1.length;i++){
                if(a1[i].className=='TROCA'){
                        a1[i].onmouseover = function(){
                                this.src = 'hover.jpg';
                        };
                        a1[i].onmouseout = function(){
                                this.src = 'normal.jpg';
                        };
                }
        }
};
</script> 
</head>
<body>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
        <a href="home.html"><img class="TROCA" src="normal.jpg" width="75" height="58" alt="Botão para a Página Inicial" /></a>
</body>
</html>

1- sim deve alterar o HTML e o JS, conforme eu passei.

 

Explicando:

Isto pega todas TAGS IMG da página

var a1 = document.getElementsByTagName('img');

O FOR() lista todos IMG fazendo um LOOP:

for(var i=0;i<a1.length;i++){
}

A IF() filtra todos IMG da página para pegar somente os IMG com CLASS que seja igual a TROCA(em maiusculo):

if(a1[i].className=='TROCA'){}

Todas <IMG> que você quiser que receba o EFEITO deve possuir class="TROCA", =)

 

Atenciosamente Silverfox

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Mas, neste caso, não será sempre uma mesma imagem a ser substituida por outra? Vou exemplificar, que acho que fica mais fácil:

 

Num caso anterior, acho que este código seria PERFECT, pois eu estava com um menu todo igual, onde todos os botões tinham uma imagem abaixo igual, e o texto escrito por cima era o que diferenciava cada botão. Este código que você me passou serve para este caso, certo? Se sim, vou alterar agora mesmo o código do caso anterior... pois com isso, o meu documento, ao invés de ter 345 linhas, terá apenas 15...

 

No caso atual, eu estou com vários botões diferentes. Por exemplo: o primeiro botão tem um desenho de casinha colorida. Ao passar o mouse por cima, fica a casinha em preto e branco. O segundo botão, tem o desenho de uma mão realizando uma atividade matemática em cores(a página é para um professor de matemática - o meu chefe). Ao passar o mouse por cima, fica a mão em preto e branco.

 

Neste caso, o código precisa mostrar quais serão as imagens... certo?

 

Mais uma vez, obrigada pelas respostas...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom... voltemos ao inicio.. deixando aquele código que era 'mais simples', agora reutilizável

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
	var normal = '';
	toggle_src( id('a1') );
	toggle_src( id('a2') );
}
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="home.html"><img src="normal-home.jpg" width="75" id="a1" height="58" alt="Botão para a Página Inicial" lowsrc="hover-home.jpg" /></a>
	<a href="contato.html"><img src="normal-contato.jpg" width="75" id="a2" height="58" alt="Botão para a Página Inicial" lowsrc="hover-contato.jpg" /></a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Maravilhoso, Bruno... Deu certíssimo!!!

 

Agora só falta uma coisa: você pode me explicar o que acontece nas linhas que eu recortei abaixo? Algumas coisas eu já entendi... mas faltam outras...

 

Muito obrigada!!! 

	var normal = '';
	toggle_src( id('a1') );
	toggle_src( id('a2') );
}
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;		
	}
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

var normal = '';//crio uma variavel chamada [b]normal[/b] com escopo global, para guardar o src original

toggle_src( id('a1') );//chamo a função toogle_src() no elemento de id="a1"

toggle_src( id('a2') );//chamo a função toogle_src() no elemento de id="a2"

}

function id( el ){//declaração da função id(), que na verdade é um atalho

return document.getElementById( el );

}

function toggle_src( el )//declaração da função toggle_src(), ela espera como parâmetro o elemento <img />, em que o toggle deve ser aplicado

{

el.onmouseover = function(){//delegando uma função ao evento onMouseOver do elemento que veio por parâmetro

normal = this.src;//guardando o src inicial na nossa variavel global normal

this.src = this.lowsrc;//trocando o src, pelo da imagem hover, a qual declaramos no atributo lowsrc da <img />

}

el.onmouseout = function(){

this.src = normal;//retornando ao início

}

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Maravilha!!! Muito obrigada meeesmo, Bruno! você me ajudou muito.

 

Deu tudo certinho! E ficou lindo! Tanto o layout quanto o código... hehe.

 

Obrigada pela paciência, atenção e respeito... admiro muito o trabalho de quem se dispõe a responder as dúvidas de outros usuários que nem mesmo conhecem!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito