Trying to only load function when source is a jpg
<p>As an exercise, I'm trying to make a hoverzoom script in Javascript without resorting to jQuery. The script puts all the <code>&lt;a&gt;</code> links on the page in an array, then searches for <code>href</code> with an extension of <code>jpg</code> and applies a hoverzoom function to it</p>

<p>I'm very close to getting it working. The function works fine for instances where the <code>&lt;a&gt;</code> filename DOES end in jpg, but when it ends in something different the code breaks. Here's the offending code:</p>

<pre><code>for (var i = 0; i &lt; aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aImages.push(aLinks[i]);
    }
    aImages[i].onmouseover = function() {
        hoverZoom(this);
    }
    aImages[i].onmouseout = function() {
        refresh(this);
    }
}
</code></pre>

<p>The full script plus a live version is here: <a href="http://james.is.agoodman.com.au/git/js_hoverZoom/" rel="nofollow">http://james.is.agoodman.com.au/git/js_hoverZoom/</a></p>

<p>As you can see in the live demo it works for the two image links, breaks on the third non-image link, and then the subsequent image links don't work either.</p>

<p>EDIT: Apologies, forgot to specify a question. How can I alter the script to only function when the source extension matches .jpg, and do nothing when the extension doesn't match?</p>
