Applicare animazione mootools a vari div

**littlesnack** · 06-09-2010, 12:43

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] 			}); 		} 	}); });

**Xinod** · 06-09-2010, 15:55

ma come vi viene in mente di postare codice tutto su una riga??

**littlesnack** · 06-09-2010, 16:08

Giusto... ma pensavo che la funzione code formattasse diversamente...
comunque

HTML

<div id="pulsante1" onclick="location.href='http://www.indirizzooooo.it';" style="cursor: pointer;"></div>

Codice Java

// JavaScript Document

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]
});
}
});

$('pulsante2').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]
});
}
});

});

CSS

div#pulsante1 {
width: 211px;
height: 77px;
background-image:url(puls1.png);
}

div#pulsante2 {
position:absolute;
width: 211px;
height: 77px;
top: 95px;
background-image:url(puls1.png);

}

Poi ho tolto le immagini di sfondo dai css e ho messo un immagine mappata dentro ai div perché i pulsanti hanno una forma strana, ma non dovrebbe influire.

**Xinod** · 06-09-2010, 17:26

$$
selectors
each

tutti i link figli di "contenitore"

codice:

$$('#contenitore a').each(function(el){
	el.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]
			});
		}
	})
})

tutti gli elementi con classe "pulsante" figli di "contenitore"
$$('#contenitore .pulsante').each(function(el){...})

ciao

**littlesnack** · 06-09-2010, 18:48

Grazie 1000!!!!!

Discussione: Applicare animazione mootools a vari div

Strumenti discussione

Ricerca discussione

Visualizza

Applicare animazione mootools a vari div

Permessi di invio