8

Preciso que esta função seja automatizada para que aplique-se a todas imagens constituídas sobre a documento HTML sem execeção alguma

Código

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="128px" height="128px" onMouseOver="aumenta(this)" onMouseOut="diminui(this)" />

<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="128px" height="128px" onMouseOver="aumenta(this)" onMouseOut="diminui(this)" />

<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="128px" height="128px" onMouseOver="aumenta(this)" onMouseOut="diminui(this)" />

Ou seja, não quero ficar tendo o trabalho de editar cada tag img para passar os parâmetros onMouseOver="aumenta(this)" e onMouseOut="diminui(this)".

Ja tentei algo com loop mas acho que estou um pouco confuso devido de tanto ficar modificando.

5
  • Todas as suas imagens do seu documento HTML ficam abaixo de algum outro elemento? Em algum local específico? Ou as imagens são espalhadas entre diversos elementos? Commented 8/02/2017 às 18:19
  • @GabrielKatakura Ficaram definda dentro de um elemento cujo ha um id em especial para elas. Commented 8/02/2017 às 18:24
  • Pode colocar esse trecho de HTML no exemplo? Creio que efetuar um Event Delegation seja a melhor solução, visto que os elementos estão todos agrupados em um elemento. Commented 8/02/2017 às 18:27
  • @GabrielKatakura Bem, agora complico! Pois coloquei aqui o que julgo ser necessário. Adicione um exemplo de modo que ficasse prático para compreensão do real problema que estava enfrentado. A criação toda fica tudo dinâmica, tag img e outros demais elementos, acho que se eu fosse postar isso tudo sairia fora do escopo da pergunta e provalmente ganharia alguns downVote. rsrs Commented 8/02/2017 às 18:33
  • OK, então não posso formular uma resposta com a ideia do Event Delegation, mas aqui fica um link para você analisar se esse é o seu caso. davidwalsh.name/event-delegate Commented 8/02/2017 às 18:35

4 Respostas 4

12

Uma solução usando somente CSS

.aumentaFi:hover {
  width: 200px;
  height: 200px;
}
.aumentaFi {
  transition: all 0.1s;
}
<img src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="128px" height="128px" class="aumentaFi" />
<img src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="128px" height="128px" class="aumentaFi" />
<img src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="128px" height="128px" class="aumentaFi" />

0
8

Você está especificando o evento de uma forma inline.

A outra maneira é adicionar um evento através do addEventListener().

Para isto, você precisa selecionar todos elementos que você quer, iterar em cada um deles, e setar o evento individualmente.

A título de sugestão, você pode adicionar uma classe a cada tag <img> e usar o document.getElementsByClassName() para selecionar todos elementos que contém esta classe.

Ficaria mais ou menos assim:

var images = document.getElementsByClassName('img');

for (var i =0; i<images.length; i++) {
    var image = images[i];
    image.addEventListener('mouseover', aumenta);
    image.addEventListener('mouseout', diminui);
};

function aumenta(e) {
    var obj = e.target;
    obj.height = obj.height * 2;
    obj.width = obj.width * 2;
}

function diminui(e) {
    var obj = e.target;
    obj.height = obj.height / 2;
    obj.width = obj.width / 2;

}
<img class='img' src="https://sites.google.com/site/mplayerplugin/louvor/1.jpg" width="128px" height="128px"  />

<img class='img' src="https://sites.google.com/site/mplayerplugin/louvor/2.jpg" width="128px" height="128px"  />

<img class='img' src="https://sites.google.com/site/mplayerplugin/louvor/3.jpg" width="128px" height="128px" />

6

Solução em Javascript básico, sem jQuery:

// Obtenha todos os elementos do tipo <img>
var elems = document.getElementsByTagName("img");

// Cicle por todos os elementos obtidos,
for (var i = 0; i < elems.length; i++) {

    // Adicionando um listener para o evento mouseover,
    elems[i].addEventListener("mouseover", function() {
        this.height = 256;
        this.width = 256;
    });

    // e outro para o evento mouseout.
    elems[i].addEventListener("mouseout", function() {
        this.height = 128;
        this.width = 128;
    });
}
-2

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>.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .