A more softer way to enhance an item when the mouse fly over it

Hi,

I’m new with html and javascript language and I’m building a personal webpage for self development/hobbie/entertainment. I want to do the simple thing of make an item move or be someway highlighted when the mouse fly over it and to do it I made the following code:

[CODE]<script>
function hovermouse(x) {
x.style.height = “113px”;
x.style.width = “113px”;
}

function normalImg(x) {
x.style.height = “80px”;
x.style.width = “80px”;
}
</script>[/CODE]

Then, with the simple <img> tag and calling the above functions I can do the desire effect:

[CODE]<img onmousemove=”hovermouse(this)” onmouseout=”normalImg(this)” src=”images/snoopy.gif” alt=”HobbiesButton” width=”80″ height=”80″>[/CODE]

This method works but is kinda ugly. The items change their size in a very rough way and all the page shakes when the mouse fly over the item which makes this funcionality a little bit annoying.

Can someone tell me another way of doing this kind of effect in a more softer way where just the item itself moves (in a more softer way) when the mouse fly over it and not all the page?

Thanks in advance!

Regards

Also in #HTML _↴