Html:cambiar de imagen o de tamaño de imagen al pasar el ratón

Programar (a nivel básico) siempre me ha parecido sencillo, sólo se trata de saber lo que puedes hacer y como. Pero hace tiempo un programador web me dijo algo que se me quedó grabado “no pierdas tiempo programando cosas que otro ya ha hecho…en Internet hay muchísimas”.

Pongo este pequeño código por si alguien quiere que una imagen cambie o cambie de tamaño al pasar el ratón.

<img src="/imagen.jpg" width="150" height="100" name="image_prueba"
onmouseover="image_prueba.width='300';image_prueba.height='200';"
onmouseout="image_prueba.width='150';image_prueba.height='100';" />

Esto cambia la imagen.jpg  de tamaño 150x100 a 300x200 al pasar el ratón. 
Cuando quitamos el ratón lo vuelve al tamaño original.
Para cambiar la imagen:
<img src="image1.gif" 
onmouseover="this.src='image2.gif'" 
onmouseout="this.src='image1.gif'">

Esto también se puede hacer en Java Script:

<script language=”JavaScript”>
<!– Hide the script from old browsers —

img0_on = new Image(186,25);
img0_on.src=”example2.gif“;
img0_off = new Image(186,25);
img0_off.src=”example1.gif“;

img1_on = new Image(103,33);
img1_on.src=”email2.gif“;
img1_off = new Image(103,33);
img1_off.src=”email1.gif“;

function over_image(parm_name)
     {
        document[parm_name].src = eval(parm_name + “_on.src”);
     }
function off_image(parm_name)
     {
        document[parm_name].src = eval(parm_name + “_off.src”);
     }
// –End Hiding Here –>
</script>