4. Sichtbarkeit und Clipping

Zu den Möglichkeiten von CSSP gehört es auch Layer sichtbar bzw. unsichtbar zu machen bzw sie in ihrem Anzeigebereich zu beschneiden. Die Sichtbarkeit von Layern zu ändern ist sehr einfach, man muss nur die unterschiedliche Syntax von NS4 und IE/NS6 beachten. Die folgenden Crossbrowser- Funktionen showObj und hideObj leisten dies:

   function showObj(objName) {thisObj(objName).visibility = (NS4)? "show" : "visible";}
   function hideObj(objName) {thisObj(objName).visibility = (NS4)? "hide" : "hidden";}
			

Wobei die Crossbrowser- Funktion thisObj die Referenz zum Objekt bei gegebenen Objektnamen liefert:

   function thisObj(objName)
   {
   if(IE4)   { return document.all[objName].style;}
   else if(DOM) {return document.getElementById(objName).style;}
   else if(NS4) {return document.layers[objName];}
   }

Die Funktion thisObj spielt eine zentrale Rolle in meiner Version von Crossbrowser- DHTML, denn sie wird in jeder anderen Crossbrowser- Funktion aufgerufen um eine Referenz zum gewünschten Objekt herzustellen. Sie gleicht im wesentlichen die Unterschiede im Document Object Model der verschiedenen Browser aus.

Bei der Beschneidung des Anzeigebereichs eines Layers gehen wir ganz gleich vor: eine Funktion clipObj wird aufgerufen und mit den entsprechenden Werten versorgt, diese wiederum benutzt thisObj um das Objekt zu erreichen.

   function clipObj(objName,x1,x2,y1,y2)
	{
	if(NS4)
		{
		if(x1!="auto") {thisObj(objName).clip.left=x1;}
		if(x2!="auto") {thisObj(objName).clip.right=x2;}
		if(y1!="auto") {thisObj(objName).clip.top=y1;}
		if(y2!="auto") {thisObj(objName).clip.bottom=y2;}
		}
	else
		{
		if(x1!="auto") {x1=x1+'px ';} else {x1=x1+" ";}
		if(x2!="auto") {x2=x2+'px ';} else {x2=x2+" ";}
		if(y1!="auto") {y1=y1+'px ';} else {y1=y1+" ";}
		if(y2!="auto") {y2=y2+'px ';} else {y2=y2+" ";}
		thisObj(objName).clip="rect("+y1+x2+y2+x1+")";
		}
	}

Um die Bedeutung der Werte x1, x2, y1 und y2 zu veranschaulichen mag folgende Zeichnung dienen:

Zwei Bemerkungen dazu: die Funktion ist so geschrieben, dass bei der Übergabe von "auto" als Wert die Anzeige in der so definierten Richtung nicht verändert wird. Und: die Syntax von IE und Netscape 6 war hier nicht immer gleich. Anfangs hielten sich die Mozilla- Entwickler an den W3C- Standard, doch unter dem Druck der DHTML- Entwickler schwenkten die Mozilla Leute dann auf den Microsoft- Kurs und verwenden nun seit Milestone 16 die userfreundlichere Syntax, bei der die Werte von oben bzw. links weg berechnet werden und nicht wie beim W3C von allen Rändern weg.

Das folgende Beispiel, die sogenannte Lupe, demonstriert recht eindrucksvoll was man mit Clipping so alles anstellen kann. Das Beispiel funktioniert nicht in Opera, auch nicht in der Version 6, da Opera kein Clipping interpretiert!