title: Changing image size during mouse hover
body: <p>I am currently trying to make it so that if i hover over the <code>li</code>, 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 <code>img</code> which looks like the following:</p>
  
  <pre><code>&lt;div class="profiles"&gt;
      &lt;ul&gt;
          &lt;li class="portraitsLeft" id="one" align="left"&gt;
              &lt;a href="../project/profile1.html"&gt;
                  &lt;img src="../project/images/portraits/img1.jpg" width="100" onmouseover="this.width=150;" onmouseout="this.width=100" align="middle" alt="Img1"/&gt;
              &lt;/a&gt; 
              Character 1
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i don't understand is what <code>this</code> is pointing at. I assumed it points at <code>img</code> 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 <code>li</code> or <code>a</code> instead of <code>this</code>? Thanks in advance.</p>