Ir para conteúdo

POWERED BY:

Arquivado

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

Joao Paulo M.

OnMouseOver - sem escrever na tag

Por , em Javascript

Recommended Posts

Joao Paulo M.    0

Joao Paulo M.
Postado

Olá, eu estou com a seguinte dúvida:

 

Possuo uma página simples com imagens, quando a pessoa passar o mouse sobre a imagem eu gostaria que emitisse um alerta com um determinado "valor" da imagem, tipo o exemplo:

 

<div id="imagens">
<img src="a.jpg" value="1" onmouseover="alert(this.value)"/>
<img src="b.jpg" value="2" onmouseover="alert(this.value)"/>
<img src="c.jpg" value="3" onmouseover="alert(this.value)"/>
<img src="d.jpg" value="4" onmouseover="alert(this.value)"/>
</div>

 

Mas o que eu gostaria que acontecesse é que eu não precisasse de colocar esse onmouseover em cada imagem, que fosse dinâmico, relacionado à todas as imagens dentro do div com id="imagens". Já vi isso similar aqui no fórum, mas pra radio, o código era esse:

 

<script>
function faz(){
       alert("k");
}
window.onload=function(){
  for(var x = 1; x < 5; x++){
       document.getElementById("r"+x).onclick=function(){
faz();
}
  }
}
</script>


<input type="radio" id="r1" value="a" name="r" />A<br />
<input type="radio" id="r2" value="b" name="r" />B<br />
<input type="radio" id="r3" value="c" name="r" />C<br />
<input type="radio" id="r4" value="d" name="r" />D<br />

Mas esse não me atende pois depende que haja um id, gostaria que toda vez que o mouse passasse sobre o div, ele verificasse na função se é uma imagem que ele está sobre, se sim, alert no "value" dela..

 

Ps.: não tenho certeza se pode atribuir o "value" pra imagens e isso funcionará em todos os browsers, se não, gostaria de uma solução pra isso também. O mesmo pra atribuição dinâmica do evento onmouseover.

 

 

Muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

alcaidedigital    57

alcaidedigital
Postado

Bom eu sou viciado em jQuery então vou passar por jQuery mais voce pode tentar fazer em javascript depois...

 

segue

<html>
<head>
<title>teste</title>
</head>
 <script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
$(function(){	
$('#imagens img').mouseover(function(){
	alert($(this).attr('value'));
});
});
</script>
<body>

<div id="imagens">
<img src="http://img.informe.com/img/thumbs/i/img-search.com_favicon.jpg" value="1"/>
<img src="http://img.informe.com/img/thumbs/i/img.autoweek.ru_favicon.jpg" value="2"/>
<img src="http://www.horadoplaneta.org.br/img/img_governo.jpg" value="3"/>
<img src="http://www.unisep.edu.br/img/img_mundo.gif" value="4"/>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom eu sou viciado em jQuery então vou passar por jQuery mais voce pode tentar fazer em javascript depois...

Só não pode depender do FW. Sabe fazer sem ? [apenas dica]

 

 

<div id="imagens">
<img src="a.jpg" alt="1" />
<img src="b.jpg" alt="2" />

logo:

 

window.onload = function(){
  var imgs = document.getElementById('images').getElementsByTagName('img');
  for( var i=0; i<imgs.length; i++ ){
     imgs[i].onmouseover = function(){
         alert( this.alt );
     }
  }
}

porém note:

-> os valores de atributos não devem começar com numeros

-> .value não é um atributo válido para a tag <img />

 

http://www.wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Joao Paulo M.    0

Joao Paulo M.
Postado

Obrigado William Bruno, e também li seu post sobre jQuery e é exatamente por isso que não uso jQuery.

 

Você colocou 2 observações que eu gostaria de perguntar sobre:

 

-> os valores de atributos não devem começar com numeros

Porque não? E por valor de atributo você diz como exemplo esse alt="2" né?

 

-> .value não é um atributo válido para a tag <img />

Existe algum atributo que eu possa passar um valor da img sem ser o alt? Pois o alt é aquilo que aparece escrito ao posicionar o mouse alguns segundos sobre a imagem.. (ou tem como suprimir isso?) O motivo é que em vez desse alert eu usaria a aparição de uma mini janela informativa relativa à cada imagem, logo aparecer o valor do alt sobreporia essa mini janela, ficaria deselegante..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

-> os valores de atributos não devem começar com numeros

Porque não? E por valor de atributo você diz como exemplo esse alt="2" né?

exatamente.

 

foi definido assim, qndo criaram as especificações da linguagem HTML. o '2' ali logo de cara, é que não está correto.

 

-> .value não é um atributo válido para a tag <img />

Existe algum atributo que eu possa passar um valor da img sem ser o alt?

hum.. vamos ter que descobrir quais outros atributos o img possui.

de cara, lembro do lowsrc, title, alt.

 

para ver todos, podemos fazer:

<html>
<head>
<script type="text/javascript">

window.onload = function(){
var t = document.getElementById('t');
for( prop in t ){

	document.getElementById('saida').innerHTML += prop+' <br />';
}
}
</script>
</head>
<body>

<img src="" id="t" />
<div id="saida"></div>
</body>
</html>

Tente por exemplo validar no w3c.

 

ps: o post no blog é minha sincera e humilde opinião. :lol:

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