Onmouseover plus size change

Question

I'm trying to hover my mouse on an image (sweden-a.gif), and then it changes into something else (sweden-b.gif) but I want to make the new image bigger than the original image. This is my code but it doesn't work, can someone help me see what the problem is? Thanks!

<img class="gdp-cirlce" src="img/sweden-a.gif" style="position:absolute; height:93px;" onmouseover="this.src='img/sweden-b.gif' this.style='height:123px'" onmouseout="this.src='img/sweden-a.gif'">

Answer 1

Make sure that you are referencing the JQuery library. If it's already referenced than try to add the above code to your document.ready function as follows:

$(document).ready(function(){

$('#sweden').mouseover(function() {
$(this).attr('src', 'img/sweden-a.gif'); 
$(this).css('height', '123px');
});

});

Answer 2

You can use jquery to do that.

HTML:

<img src="..."/>

Javascript:

$('img').mouseover(function() {
    $(this).attr('src', your_src);
    $(this).css('width', your_width);
    $(this).css('height', your_height);
});

UPDATE:

Code