Typeof error on jquery function

Question

I'm a little new to javascript/jquery. I'm trying to make a function that will switch from a 200x200 image to a 400x400 image on hover. Luckily, all the 200x200 images end in .200.200.jpg and all the 400x400 .400.400.jpg and are otherwise the same file path.

Here's my javascript (I switched hover to trigger for testing)

    $('.Content .ProductList li').trigger(function(){
        var ImageSRC = this.find(".productimage a img").attr('src');
        NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg');
        this.find(".productimage a img").attr('src', NewImageSRC)
    });

This is the error I'm getting on console:

TypeError: Object function (){ var ImageSRC = this.find(".productimage a img").attr('src'); NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg'); this.find(".productimage a img").attr('src', NewImageSRC) } has no method 'indexOf'

And here for reference is an abbrebiated version of the HTML I'm trying to get at:

<div class="content">
    <ul class="ProductList =">
        <li>
            <div class="ProductImage">
                <a href="#">
                    <img src="../../...200.200.jpg" />
                </a>
            </div>
        </li>
        ...
    </ul>
</div>

Answer 1

keep hover , and use

$(this).find

instead of

this.find

Answer 2

Can you do an on hover event, and adjust CSS via ID?

$( ".img200pxclass" ).hover(function() {
  $(this).attr('src','400px.png');
  $(this).switchClass( "img200px", "img400px");
  $(this).css("height", "400px"); //same for width ; except, updating class might do this for you if you want 
});

I think something like this could work, if you can mess with class attributes