Uma alternativa para atingir todas tags img
de modo similar a API moderna adventListener, seria utilizar-se do evento captureEvents. Veja:
var figura = document.getElementsByTagName("img");
for (var i in figura) {
var fotos = figura[i];
if (document.layers);
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
fotos.onmouseover = aumenta;
fotos.onmouseout = diminui;
}
function aumenta() {
this.height = this.height * 2;
this.width = this.width * 2;
}
function diminui() {
this.height = this.height / 2;
this.width = this.width / 2;
}
<img src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="120px" height="90px"/>
w3schools - Veja este exemplo rodando numa plataforma externa
Ja para este outro exemplo a sintaxe utilizada é mais limpa e amplamente compatível com demais navegadores. Confira:
var figura = document.getElementsByTagName("img");
for ( var i in figura ) {
var fotos = figura[i];
fotos.onmouseover = function() {
this.width = this.width * 2;
this.height = this.height * 2;
}
fotos.onmouseout = function() {
this.width = this.width / 2;
this.height = this.height / 2;
}
}
<img src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="120px" height="90px"/>
w3schools - Este exemplo também esta funcionando on-line
Para os dois Exemplos dados acima dispenso comentários por se torna mais simples sua compreenssão referente as sintaxe usadas neles.
Outro jeito é inserir em tempo de execução os eventos Javascript no elemento image.
Podemos conseguir isso assim:
var figura = document.getElementsByTagName("img");
for (var i in figura) {
var foto = figura[i];
var zoom = {
onMouseOver : "aumenta(this)",
onMouseOut : "diminui(this)"
}
for (var visualizar in zoom) {
foto.setAttribute(visualizar, zoom[visualizar]);
}
}
function aumenta(obj) {
obj.height = obj.height * 2;
obj.width = obj.width * 2;
}
function diminui(obj) {
obj.height = obj.height / 2;
obj.width = obj.width / 2;
}
<img src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="120px" height="90px"/>
w3schools - Uma demostração externa deste exemplo
Este é um exemplo de como fazer a inclusão do - onMouseOver
e onMouseOut
em tempo real.
Explicação
A parte principal é o setAttribute()
basicamente alternar o atributo do elemento img
:
for (var visualizar in zoom) {
foto.setAttribute(visualizar, zoom[visualizar]);
}
Para um perfeito funcionamento otimizado criamos um objeto:
var zoom = {
onMouseOver : "aumenta(this)",
onMouseOut : "diminui(this)"
}
Para guardar essas regras - onMouseOver="aumenta(this)"
e onMouseOut="diminui(this)"
.
E logo será aplicado sobre as tags img
quando o carregamento dos elementos forem realizado.
Sobre vários meio aqui apresentado por mim, o mais simples seria usar CSS1 tornando-se "Cross-Browser" acredito eu. Fazemos muito escrevendo pouco. Observe:
img:hover {
width: 240px;
height: 180px;
}
<img src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="120px" height="90px"/>
<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="120px" height="90px"/>
w3schools - Adicionei uma amostra deste exemplo aqui!
Nota - No IE, deve ser declarado um <! doctype>
para que o seletor hover
funcione em outros elementos que não seja o elemento <a>
.
id
em especial para elas.Event Delegation
seja a melhor solução, visto que os elementos estão todos agrupados em um elemento.img
e outros demais elementos, acho que se eu fosse postar isso tudo sairia fora do escopo da pergunta e provalmente ganharia alguns downVote. rsrsEvent Delegation
, mas aqui fica um link para você analisar se esse é o seu caso. davidwalsh.name/event-delegate