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

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

I've already tried something with loop but I think I'm a little confused due to so much modifying.

Answer:

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

Post Views: 108