--> home Seitenstatus 3

 JavaScript


Einführung in JavaScript Primer

Variablen und Objekte in JavaScript. Variablen

Schleifen, Bedingungen und Funktionen in JavaScript Strukturen

Grundsätzliches zu Objekten in JavaScript Objekte

Objekte, die der Client/Browser zur Verfügung stellt Browser

Das klassische Objektmodell für Elemente einer HTML-Seite HTML

Multimedia-Objekte Multimedia

DHTML »

DOM ermöglicht den Zugriff auf HTML- oder XML-Objekte DOM

Bibliothek, Sites mit fertigen Skripten oder Beispielen Skripte

Software

Das layer-Objekt von Netscape
layer
Das all-Objekt von Microsoft
all
Stylesheets werden im Navigator über JavaScript erledigt.
NN: Stilklassen
Ereignis-Objekt
Ereignis
CrossBrowser-Programmierung
Crossbrowser

Objektorientierte Lösung für DHTML
OO-Lösung
Übersicht zufälliger Teil
Zufall
Lineare Bewegung
Linear
Links zu DHTML
Links

PageMap 
(Umfang 188 Seiten)



Sponsoring  




3 ilayer-Element von Netscape [html]

3 Positionen in Cascading Stylesheets [css]

3 Das layer-Element von Netscape [html]

3 div-Element [html]

Assoziiert  






JavaScript-Objekte

spez. Seiten zu JavaScript  





 


Auswahl dBooks:

Suche und verwandte Themen  





Verschiedenes  


Netonstage - webprojekte - webconsulting - softwareentwicklung
back


     Crossbrowser

Möglichkeiten für die plattformübergreifende Programmierung von DHTML-Seiten mit JavaScript.

Oft wird in Beispielen zu DHTML für jede Aktion eine entsprechende Fallunterscheidung nach dem hier folgenden Beispiel getroffen. Mit einer objektorientierten Lösung kann man sich diese umständliche und fehlerträchtige Vorgangsweise ersparen.

Nach zwei Tagen Beschäftigung mit diesem Thema, war ich ehrlich überrascht, wie einfach sich auch komplexere Dinge mit einem objektorientierten Ansatz lösen lassen. Bei einer Suche nach ähnlichen Ansätzen bin ich leider nicht allzuweit gekommen. Wenn Sie Ansätze und Lösungen kennen, wird ein Hinweis gerne aufgenommen.

Der objektorientierte Ansatz soll als Anregung verstanden werden, eigene Lösungen zu realisieren. Die Kernmodule für die Animation werden in der nächsten Zeit noch über verschiedene Plattformen gecheckt.

    1. Schritt: Fallunterscheidung Objekte


Hier nur ein kleines Beispiel, wie man allgemein gültige Funktionen schreiben kann. Es basiert im wesentlichen darauf, daß je nach Plattform die Anweisungen zusammengebaut und über eval ausgeführt werden.
   Ergebnis
Verstecke Alle Ebenen
Zeige Alle Ebenen
Nashorn nach Rechts
Nashorn nach Links
   Quellcode



<script language="javascript"><!--
// Object detection
if (document.all) {  // MSIE
   objectLayer = 'document.all[\'';
   objectStyle = '\'].style';
}
else {
   if (document.layers) { // NN until 4.7
      objectLayer = 'document.layers[\'';
      objectStyle = '\']';
   }
   else {
      if (document.getElementById) {  // NN 6
         objectLayer = 'document.getElementById(\'';
         objectStyle = '\').style';
      }
      else {
         objectLayer = '';
         objectStyle = '';
      }
   }
}
var viewedLayer='nashorn';

// Change Visibility
function switchLayerVisiblity(whichLayer) {
   if (objectLayer) {
      layerAccess(whichLayer,'.visibility=\'visible\'');
      layerAccess(viewedLayer,'.visibility=\'hidden\'');
      viewedLayer=whichLayer;
   }
}

// Access Layer
function layerAccess(whichLayer,actionLayer) {
   if (objectLayer) {
      layerString=objectLayer+whichLayer+objectStyle+actionLayer;
      //alert (layerString);
      layer=eval(layerString);
   }
}
//-->
</script>

<style type="text/css">
#nashorn{position:absolute;visibility:visible;top:555;left:555;z-index:1;}
#hund{position:absolute;visibility:visible;top:540;left:540;z-index:1;}
</style>


<div id="nashorn"><a href="#"
   onmouseover="switchLayerVisiblity('hund');"><img
      src="/pic/example/nashorn.jpg"
      width=320 height=170" name="bild"  border="1"></A></div>

<div id="hund"><a href="#"
   onmouseout="switchLayerVisiblity('nashorn');"><img
      src="/pic/example/hund.jpg"
      width=320 height=170" border="1"></a></div>

<a href="#example"
   onclick="
      layerAccess('nashorn', '.visibility=\'hidden\'');
      layerAccess('hund','.visibility=\'hidden\'');
">Verstecke Alle Ebenen
</a>

<br>

<a href="#example"
   onclick="
      layerAccess('nashorn','.visibility=\'visible\'');
      layerAccess('hund','.visibility=\'visible\'');
">Zeige Alle Ebenen
</a>

<BR>

<a href="#example"
   onclick="
      layerAccess('nashorn','.left=500');
">Nashorn nach Rechts</a>

<br>
<a href="#example"
   onclick="
      layerAccess('nashorn','.left=100');
">Nashorn nach Links
</a>






  Links



Kommentierte Links:

buch Bewertung: 7 dansteinman.com: DynAPI
Eine API für Crossbrowser-DHTML...

Unkommentierte Links:

Bewertung: webreference.com: Netscape 6, Part I: Detection and Scripting
Bewertung: webreference.com: Netscape 6, Part V: DOCJSLIB 1.1

Link empfehlen



 forward


(München, 2001-02-17 00:00:00 / )
Der Betreiber von www.dBooks.de übernimmt keine Verantwortung für den Inhalt und die Richtigkeit der Angaben auf den verlinkten Websites. Zu den üblichen NoNos gibt es keine direkten Verweise.

(Umfang dBook JavaScript: 188 Themenseiten )
letzte Generierung Mon, 30 Apr 2001 12:17:15 GMT 49
© Werner Diwischek