Hover-Effekt  nach oben

Der einfachste Effekt der mit DHTML Behaviors erzielbar ist, ist der sogenannte Hover-Effekt (veränderte Farbe eines Textes beim überfahren mit der Maus). Um diesen mit DHTML Behaviors umzusetzen wird eine HTC-Datei wie folgt definiert:

<public:component>
 <public:property name="wert_on" value="red" id="w_on" />
 <public:property name="wert_off" value="blue" id="w_off" />
 <public:attach event="onmouseover" onevent="change_on()" />
 <public:attach event="onmouseout" onevent="change_off()" />
 <script>
  function change_on()
  {
   element.style.color = w_on.value;
  }

  function change_off()
  {
   element.style.color = w_off.value;
  }
 </script>
</public:component>

Innerhalb des Dokumentes kann die Datei dann wie folgt verwendet werden:

<span style="behavior:url(hover.htc)" wert_off="black"> ... Inhalt ... </span>

Beispiel ansehen.

Ausklapp-Liste  nach oben

Als ein weiteres Beispiel wollen wir hier eine Ausklapp-Liste erstellen. Dazu wird innerhalb des Dokumentes eine fertige Liste erwartet. Ausserdem wird eine HTC-Datei definiert, die auf alle li-Elemente angewandt wird. Sie beschreibt zwei Dinge: 1. Bei einem Klick, müssen die Kind-Elemente entfernt werden. 2. Bei einem erneuten Klick, müssen die Kind-Elemente wieder angezeigt werden. Das Ganze wird wie folgt umgesetzt:

<public:component>
 <public:property name="status" value="open" id="status" />
 <public:attach event="onclick" onevent="change_status()" />
 <public:method name="actualize" />
 <script>
  function change_status()
  {
   if(status.value == 'open'){status.value = 'closed'}
   else{status.value = 'open'}
   actualize();
  }

  function actualize()
  {
   j = element.all.length;
   for(i=0;i<j;i++)
   {
    if(status.value == 'open')
    {
     element.all(i).style.visibility = 'visible';
     element.all(i).style.display = 'block';
    }
    else
    {
     element.all(i).style.visibility = 'hidden';
     element.all(i).style.display = 'none';
    }
   }
  }
 </script>
</public:component>

Die dazugehörige Liste könnte z.B. so aussehen:

<style>
 LI {behavior:url(liste.htc);}
</style>
...
<ul>
 <li>Eintrag 1
  <ul>
   <li>Eintrag 1.1</li>
   <li>Eintrag 1.2</li>
  </ul>
 </li>
 <li>Eintrag 2
  <ul>
   <li>Eintrag 2.1</li>
   <li>Eintrag 2.2</li>
  </ul>
 </li>
</ul>

Beispiel ansehen.

Ticker  nach oben

Als letztes soll nun beispielhaft ein Ticker (~ Lauftext) gebastelt werden. Innerhalb des Dokumentes werden dazu einen eigenen Namespace namens ticker und das dazugehörige Element text definieren. Als Attribute erhält der Ticker von uns 3 Texte übergeben, die er nacheinander anzeigen soll. Das Dokument:

<html xmlns:ticker>
<head>
 <style>
  ticker:text {behavior:url(ticker.htc);}
 </style>
</head>
<body onload="ticker.start()">
<ticker:text id="ticker" text1="Dieser Text tickt!"
             text2="Text Nummer 2."
             text3="... und die letzte Nachricht." >  
</ticker:text>
</body>
</html>

Die dazugehörige HTC-Datei könnte z.B. so aussehen:

<public:component>
 <public:property name="text1" value="1" id="text1" />
 <public:property name="text2" value="2" id="text2" />
 <public:property name="text3" value="3" id="text3" />
 <public:property name="pause" value=" " id="pause" />
 <public:property name="zeit" value="200" id="zeit" />
<public:method name="start" />
 <public:method name="stop" />
 <public:method name="display" />
 <script>
  var running = false;
  var timer;
  var pos = 0;
  function start()
  {
   running = true;
   display();
  }

  function stop()
  {
   running = false;
  }

  function display()
  {
   pos++;
   var s = text3.value+pause.value;
   s += text2.value+pause.value;
   s += text1.value+pause.value;
   if(pos > s.length){pos = 0;}
   s = s.substr(s.length-pos,s.length);
   innerHTML = s;
   if(running = true)
   {timer = window.setTimeout('ticker.display()',zeit.value);}
  }
 </script>
</public:component>

Beispiel ansehen.