What would be a good way to apply events: onMouseOver and onMouseOut, for all img tags?

Question

I need this function to be automated so that it applies to all images built on the HTML document without any exception

Code

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)" />

I mean, I don’t want to go through the trouble of editing each tag img to pass the parameters onMouseOver="aumenta(this)" and onMouseOut="diminui(this)".

I’ve tried something with loop but I think I’m a little confused because I keep changing.

Answer 1

A solution using CSS only

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

Answer 2

You are specifying the event in a way inline.

The other way is to add an event through the addEventListener().

For this, you need to select all elements you want, iterate on each of them, and set the event individually.

As a suggestion, you can add a class to each tag <img> and use the document.getElementsByClassName() to select all elements containing this class.

It would look something like this:

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" />

Answer 3

Basic Javascript solution, no 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;
    });
}

Answer 4

An alternative to reach all tags img similar to the modern API adventListener, would use the event captureEvents. Behold:

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 - See this example running on an external platform

Already for this other example the syntax used is cleaner and widely compatible with other browsers. Check out:

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 - This example is also working online

For the two Examples given above I do not need comments because it becomes simpler your understanding regarding the syntax used in them.

Another way is to insert Javascript events into the image element at runtime.

We can get it like this:

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 - An external demonstration of this example

This is an example of how to include - onMouseOver and onMouseOut in real time.

Explanation

The main part is the setAttribute() basically toggle the element attribute img:

for (var visualizar in zoom) {
        foto.setAttribute(visualizar, zoom[visualizar]);
}

For a perfect optimized operation we create an object:

var zoom = {
        onMouseOver : "aumenta(this)",
        onMouseOut : "diminui(this)"
}

To keep these rules - onMouseOver="aumenta(this)" and onMouseOut="diminui(this)".

And soon it will be applied on the tags img when loading the elements is carried out.

About several means here presented by me, the simplest would be to use CSS1 becoming "Cross-Browser" I believe. We do a lot of writing little. 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 - I added a sample of this example here!

Note - In the IE, must be declared a <! doctype> so that the selector hover function on items other than the element <a>.