Kurs 3 DHTML - Zeigen und Schieben


Kurs 3  DHTML 
Themen ZEIGEN und SCHIEBEN von Elementen


Erste Interaktionen


Mit JAVASCRIPT werden in diesem Beispiel Elemente, (ein Bild und ein Text) ANGEZEIGT/ VERSTECKT 
und VERSCHOBEN. Der neu geschaffene Scriptbefehl getElementById() übernimmt dabei die Hauptarbeit 
der Annahme der Werte und deren Zuweisung an das gewünschte Objekt. Alle neueren Internetprogramme 
(Browser) verstehen diesen Befehl und eine aufwändige Programmierung kann man sich nun sparen.



Und besser zu verstehen was sich hier abspielt nun eine kleine Zusammenfassung:

<html>
<head>

[CSS Angaben/ Basisangaben "eins", "zwei"; zur Freisetzung, Positionierung der zwei DIV-Container]

[SCRIPT /Funktionen-Beschrieb (schalten und schieben) - Annahme der zugesendeten Werten via Links
               über jeweilige Identität und Position , anschliessend Weiterleitung mit getElementById() an die DIV-Container]

</head>

<body>

[Setzen der DIV Container(2) versehen mit einer CSS-CLASS Zuweisung und einer eindeutigen  ID und dem Bild/ Text]

[Die Befehle/ Links (5), verschicken Angaben/ Werte an den SCRIPT-Bereich der eigenen Webseite]


</body>
</html>
 



Im HEAD-Bereich der Webseite befindet sich, wie schon gesagt das CSS und das SCRIPT, dass dafür sorgt das sich etwas 
tut auf dieser Seite.


<style type="text/css">
<!--

.eins     {position: absolute; top: 2720px; left: 440px;}
.zwei    {position: absolute; top: 2820px; left: 440px;} 
 
 
a          {text-decoration: none;}   (Damit wird der Unterstrich des Links entfernt )

body     {font-family: arial,sans serif;}

-->
</style>

<script language=JavaScript>
<!--

Beginn der Funktion schalten(), mit WEN (Platzhalter) wird der ankommende Wert gesetzt und weitergeleitet

function schalten(wen)  
{  
   {
       
Hier werden die STYLE-Eigenschaften zu Variablen definiert, und werden so programmierbar gemacht

     visible = 'visible';
    hidden = 'hidden';

OBJ bekommt die jeweilige Identität vom jeweiligen Aufruf mitgebrachten Wert via WEN, beigefügt wird noch .style

         obj = document.getElementById(wen).style; 
    }       

Die IF-Schlaufe sorgt nun noch zusätzlich das es zu einem EIN/AUS Effekt kommt, genauer die CSS-Eigenschaft
visibilty wird hier angesprochen und je nach Status neu definiert

    if (obj.visibility == hidden)
    {
        obj.visibility = visible;
    }
    else
    {
        obj.visibility = hidden;
    }
}

Dieser zweite Befehl funktioniert gleich mit dem Unterschied das hier keine SCHLAUFE zum Einsatz kommt

function schieben(wen, wert1, wert2)

{   
        obj = document.getElementById(wen).style;

        obj.top = wert1; 
        obj.left = wert2;
}
-->
</script>


Im BODY-Bereich der Webseite befindet sich, wie schon gesagt Die zwei DIV-Container und die BEFEHLE.


<div class="eins" id="figur"><img src="dhtml/mouse.gif"></div>

<div class="zwei" id="text">Hier ist nur dieser Text</div>

  
<b>MOVE 01</b> - Zeigen/ Verstecken und Schieben<p>

<a href="javascript: schalten('figur')">Zeige/ Verstecke die Figur</a><br>

<a href="javascript: schalten('text')">Zeigen/ Verstecke den Text</a><p>


<a href="javascript: schieben('figur', '2681px', '351px')">Schiebe die Figur </a><br>

<a href="javascript: schieben('text', '2804px', '290px')">Schiebe den Text</a>

<p><br>

<a href="dhtml3.html">Restart</a>


Mit diesem Beispiel können nun weitere Programme erstellt werden und weiteren Befehlen beigefügt werden. 

Hinweis: Auf älteren Browsern läuft diese Demo nicht, grundsätzlich wird heute nicht mehr auf volle Kompatibiltät 
geschaut, es ist auch aus Sicherheitsgründen empfohlen die ältere Browser-Generation nicht mehr zu benutzen.   
Programmierung für die alten Browsern, hätte dazu geführt, dass kaum mehr jemand gross weiter gelesen hätte. 


Praxis Beispiel Kurs 3 - Zeigen/ Verstecken und Schieben von Elementen (Bilder und Text)



Hier ist nur dieser Text

Zeige/ Verstecke die Figur


Zeigen/ Verstecke den Text


Schiebe die Figur 


Schiebe den Text

 


Restart