Changing image size during mouse hover

Question

I am currently trying to make it so that if i hover over the li, the image changes its size. I managed to pull out a code from a website that changes the image size if i hover over the img which looks like the following:

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="../project/profile1.html">
                <img src="../project/images/portraits/img1.jpg" width="100" onmouseover="this.width=150;" onmouseout="this.width=100" align="middle" alt="Img1"/>
            </a> 
            Character 1
        </li>
    </ul>
</div>

What i don't understand is what this is pointing at. I assumed it points at img but it doesn't seem to work. How should I change the code so that i can change the image size when i hover over the li or a instead of this? Thanks in advance.

Answer 1

There's no need for CSS(although it is cleaner) in this case. You can do this using a name attribute.

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="150" height="100" name="OrteliusWorldMap"
onmouseover="OrteliusWorldMap.width='300';OrteliusWorldMap.height='200';"
onmouseout="OrteliusWorldMap.width='150';OrteliusWorldMap.height='100';" />

JSFiddle Link.

EDIT:

You can now change it anywhere you like thanks to the name attribute.

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="google.com" onmouseover="OrteliusWorldMap.width=150;" onmouseout="OrteliusWorldMap.width=100">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="100" name="OrteliusWorldMap">
            </a> 
            Character 1
        </li>
    </ul>
</div>

JSFiddle Link.

The issue with trying to use this elsewhere is that this will try to reference the current HTML element. See the following for more information on this and how the onMouseOver event works.