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