mootools anpassen

[hermes]

Hallo,

ich bin ganz neu in der Welt von JS und möchte auch nur ein ganz kleines script anpassen. Vielleicht köönt ihr mir helfen:

habe von mootools ein Demo runtergeladen und leicht angepasset, sodass ein div einfaded, sobald ein formulartextfeld aktiv ist, und anschließend wieder ausfaded:

JS:

  
	var anotherEl = $('anotherElement');  
	  
	// Again we are able to create a morph instance  
	var morph = new Fx.Morph('anotherElement');  
  
	$('CSSmorphEffect').addEvent('focus', function(e) {  
		e.stop();  
		// Changes the element's style to .myClass defined in the CSS  
		anotherEl.morph('.fadein');  
	});  
	  
	$('CSSmorphEffect').addEvent('blur', function(e) {  
		e.stop();  
		// Changes the element's style to .myClass defined in the CSS  
		anotherEl.morph('.fadeout');  
	});  

CSS:

  
.fadein {  
	width: 500px;  
	height: 25px;  
	border: 1px solid black;  
	font-size: 12px;  
	padding: 3px;  
}  
  
.fadeout {  
	width: 0px;  
	height: 0px;  
	border: 0px;  
	font-size: 0%;  
	padding: 0px;  
}  

HTML:

  
<form method="POST" action="xxx" name="theform">  
<input type="text" name="f1" size="20" id="CSSmorphEffect">  
		<div id="anotherElement" class="fadeout">  
			Demo Text 1  
		</div>  
  <p><input type="submit" value="Abschicken" name="B1"><input type="reset" value="Zurücksetzen" name="B2"></p>  
</form>  

Klappt soweit auch.
Nun möchte ich aber unterschiedliche Formular mit mehreren Text-Feldern etc., wo jeweils, wenn ein Form.element aktiv ist (focus), ein zugehöriges div eingefaded wird.

Habe versucht, nicht über die id zu gehen, weil man die ja nur einmal vergeben darf/soll. Klappt aber nicht so recht. Und dann muss ich ja auch das form.element und das zugehörige div irgendwie verknüpfen.

Könnt ihr mir nen Tipp geben? Wie gesagt, vorher mit JS noch nicht viel gemacht, aber ich hab scripte normal immer schnell verstanden, wenn ich ein passendes Beispiel gefunden habe..

Freue mich über jeden Denkanstoss