Javascript Não obstrusivo

[[ GuTo ] 0]

<img src="003.jpg" class="thumb" id="3" /><img src="002.jpg" class="thumb" id="2" /><img src="001.jpg" class="thumb" id="1" />

Adicionar a cada img com class="thumb" esta função: abrir(id)

 

Logo, você precisa criar a rotina que gere este onmouseover nas tags imgs,

tendo o valor do seu ID dentro do abrir(x).

 

Digamos q funcionalmente as tag img com class="thumb" ficariam assim:

<img src="003.jpg" class="thumb" id="3" onmouseover="abrir(3)" /><img src="002.jpg" class="thumb" id="2" onmouseover="abrir(2)" /><img src="001.jpg" class="thumb" id="1" onmouseover="abrir(1)" />

Alguém sabe fazer?

 

Não consigo passar daqui:

<script language="javascript" type="text/javascript"><!--function init() {	var thumbs = document.getElementsByTagName('img')//.className = "thumb";  /*for(x in thumbs) {     //rotina  }*/	for(var x=0; x<thumbs.length; x++) {  alert(thumbs[x].src)                // rotina aki para adicionar o "onmouser" na tag...	}}	function addEvent(obj, evType, fn) {	if (obj.addEventListener) obj.addEventListener(evType, fn, true)	if (obj.attachEvent) obj.attachEvent("on"+evType, fn)}addEvent(window,"load",init)// --></script>

[[ GuTo ] 0]

Olhe só.. mudei meu javascript, fiz assim:

 

<script language="javascript" type="text/javascript"><!--function abrir(id) {if (!isNaN(id)) location.href = 'foto.asp?id=' + id}function init() {	var thumbs = document.getElementById('tablefotos').getElementsByTagName('img')//.className = "thumb";	for(var x=0; x<thumbs.length; x++) {  if (/thumb/.test(thumbs[x].className)) { 	 //alert(thumbs[x].src) 	 // na 1a. vez que isso entra no loop, já chama a função abrir, o QUE EU NAO QUERO 	 addEvent(thumbs[x],"click",abrir(thumbs[x].alt),false) 	 // acho que teria de mudar apenas a função abrir.. não sei.. 	 // e talvez, fique melhor usar o this ali, assim: 	 // addEvent(thumbs[x],"click",abrir(this.alt),false)  }  else alert('alt = ' + thumbs[x].alt)  /*if (thumbs[x].className == 'thumb') alert(thumbs[x].src)  else alert('alt = ' + thumbs[x].alt)*/	}}function addEvent(elm, evType, fn, useCapture) {	if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture) } //; return true; 	else if (elm.attachEvent) { var r = elm.attachEvent("on"+evType, fn) }//; return r;	else { alert("Handler could not be removed"); return false }}addEvent(window,"load",init,true)// --></script>

<img src="003.jpg" class="thumb" alt="3" /><img src="002.jpg" class="thumb" alt="2" /><img src="001.jpg" class="thumb" alt="1" />

Porém agora, ele não está funcionando ainda.

Pois, quando entra no loop, para colocar um evento na tag img, logo de cara chama a função abrir que estou atribuindo ao atributo onclick, o q não poderia acontecer.

Alguém tem alguma idéia de como posso melhorar e arrumar isso?

Mas apenas mudando alguma coisa no função init ou na função abrir. beleza?

[[ GuTo ] 0]

Ninguém sabe mais que eu de javascript aki?hehehe.. zuera... mas o pessoal aí manja mto mais q eu, e não ker responder? puxa vida hein :P Eu sei fazer de outra forma, q seria obj[x].onclick=function { abrir(this.alt)}mas keria mecher com algo parecido, usando o AddEvent...

[Crystian 0]

Bom guto, eu como você não tenho muita prática com javascripts não obstrusivos, pois aprendi JS da pior forma possível, fuçando. Por isso acho q o pessoal não está sabendo responder a tua dúvida, pq como você mesmo disse você consegue fazer de outra forma e provavelmente essa seja a forma q a maioria te indicaria a fazer. Acredito q todos temos q aprender a programar em JS pois nossas páginas hj possuem muito JS não devidamente criados. Estou estudando ainda, logo logo estarei mais apto a responder dúvidas como essa.Abraço

[[ GuTo ] 0]

Opa, obrigado Crystian!Sabe, eu tbm sou mais um metido aí na net. Tudo que sei, foi fuçando e lendo uma coisa q outra, por aki, por ali... Autodidata com mto orgulho!E a brincadeira, fica a parte. Não tô cobrando nada de ninguém, pq ninguém aki vive de fórum, ou tô errado? :P Abração a todos! :D

[Crystian 0]

Realmente guto, ninguem vive do fórum, mas acho q todos querem crescer juntamente com o fórum. Pra mim uma dúvida como a tua me incentiva a continuar estudando, pq a cada dia chego a conclusão q eu não sei nada e tenho muito o que aprender. Acho q eu tenho o "cargo" de moderador pq tenho um pouco de disponibilidade e um pouco de conhecimento, mas acima de tudo pq gosto do q faço e tenho certeza que posso aprender e ensinar muito ainda. Aproveitando, gostei das tuas opiniões no tópico q criamos para saber o q o pessoal tava querendo aprender em JS, pode ter certeza q haverá material sobre o q você pediu.Abraço

[[ GuTo ] 0]

Digo o mesmo Crystian. Todos os dias chego a esta mesma conclusão, que tenho mto de aprender ainda.Uma das coisas que faz parte do nosso mundo web, é o fato de que temos de ter os mais diversos conhecimentos em diversas áreas. Não vou prolongar-me...Fico feliz que tenha gostado das minhas dúvida, e tenho certeza que as atendará com mto gosto e competência. Estou aguardando este material. ;) Abraços!

[hinom 5]

eu entendo desse bagulho aí mas estou sem tempo, nem entro mais nesse forum javascriptoutro que manja é o void, mas deve estar ocupado.

[Vallux 0]

Olá!

 

Pelo que entendi, ao usar a função "addEventListener" para atribuir um manipulador ao um evento, este manipulador é executado.

 

Tive o mesmo problema e resolvi da seguinte maneira:

 

Algumas observações:

 

caso 1

var variavel = nome_função;

 

Caso 2

var variavel = nome_função(par1,par2);

 

no 1º caso variavel recebe o corpo da função, ou seja, "function nome_função(parametro,parametro) { ... return algo } "

 

no 2º caso variavel recebe o valor de retorno da função

 

observa-se que no 2º caso a função é executada e este comportamento se repete no case de "nome_função" ser passada como um parâmetro para outra função

 

tente executar o seguinte código:

 

 

function f(vl){return vl;}function f2(vl){	return vl;}document.write(f2(f)+"<BR>");document.write(f2(f("aaaaa"))+"<BR>");

 

No meu caso eu criei uma função intermediária que recebia só um parâmetro (um objeto da classe Event)

e dentro desta função fazia chamada à função que realizaria o trabalho.

 

Acesse este endereço para mais detalhes

 

http://elcio.locaweb.com.br/crossbrowser/

 

Espero ter ajudado.

[[ GuTo ] 0]

Valeu cara!Não entendi nada, mas eu já resolvi, e dá melhor forma possível! ;) Abraços!