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

Navigation
8

I need this function to be automated so that it applies to all images made 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)" />

That is, I do not want to be bothering to edit 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 of so much modification.

    
asked by anonymous 08.02.2017 / 18:28

4 answers

8

You are specifying the event in a way inline .

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

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

As a suggestion, you can add a class to every <img> tag and use document.getElementsByClassName() to select all elements that contain 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" />
    
08.02.2017 / 18:50
12

A solution using only 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" />
    
08.02.2017 / 19:13
6

Basic javascript solution without 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;
    });
}
    
08.02.2017 / 18:50
-2

An alternative to reach all img tags similar to the modern API adventListener , it would use the event captureEvents a>. See: 

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 - View this example by 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 dispense comments by making their understanding of the syntax used in them simpler.


Another way is to insert JavaScript events in the image element at runtime.

We can achieve this 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 setAttribute() basically toggle the attribute of the img element: 

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

For optimum optimization we create an object: 

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

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

And soon it will be applied to the img tags when the elements are loaded.


About several medium here presented by me, the simpler would be to use CSS1 becoming "Cross-Browser" I believe. We do a lot of writing little. Note: 

    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've added a sample of this example here!

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

08.02.2017 / 21:46
Is the finally block always executed in Java? [duplicate] Is it a good practice to use summary for documentation?