Ciao ragazzi, avrei bisogno di fare un semplice menu con immagini in cui ogni pulsante ha un effetto al passaggio del mouse.

Ora, ho già creato il tutto con un pulsante, ma vorrei applicare l'animazione a tutti gli altri senza scrivere 20 volte il codice di mootools.
Come posso fare?
Grazie in anticipo per l'aiuto!

Codice html:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <link href="menustyle.css" rel="stylesheet" type="text/css" /> </head> <script src="mootools124.js" type="text/javascript"></script> <script src="animazione.js" type="text/javascript"></script> <body> <div id="pulsante1" onclick="location.href='http://www.indirizzooooo.it';" style="cursor: pointer;"></div>        </body> </html>
Foglio di stile CSS:
codice:
div#pulsante1 { 	width: 211px; 	height: 77px; 	background-image:url(puls1.png); 	float:left; }
Script Java/Mootools:
codice:
window.addEvent('domready', function(){ 	//First Example 	 	// We are setting the opacity of the element to 0.5 and adding two events 	$('pulsante1').addEvents({ 		mouseenter: function(){ 			// This morphes the opacity and backgroundColor 			this.morph({ 				'margin-left': [0, 5] 						}); 		}, 		mouseleave: function(){ 			// Morphes back to the original style 			this.morph({ 				'margin-left': [5, 0] 			}); 		} 	}); });