DHTML (DynamicHTML) ist die Kombination mehrerer Web Technologien, aber die wichtigsten sind Cascading Style Sheets (CSS), Document Object Model (DOM) und client-side scripting (hauptsächlich - JavaScript). Viele Dinge die früher nur mit Java applets und plug-ins möglich waren, kann man nun mit DHTML machen, und dabei vermeidet man die lange Ladezeit der applets und plug-ins (und DHTML ist leichter zu lernen als Java) . In der Überschrift über diesem Text sehen Sie ein Beispiel, wozu man DHTML benutzen kann. Unter diesem Text ist ein Beispiel eines DHTML-Taschenrechners. Dieser "Rosa" Taschenrechner ist der Gleiche, wie derjenige auf dieser Seite, aber hier in Kombination mit Cascading Style Sheets. Die Farben und Grösse können leicht geändert und angepasst werden.
Für das Positionieren des Rechners auf einer Seite benutzen Sie die entsprechenden Attribute.
Elemente bewegen (IE): Mit der Maus kann man verschiedene Elemente auf einer Seite bewegen: Bilder, Tabellen, Text usw. Um das zu erreichen, müssen Sie nur das Attribut class=sf (es muß nicht 'sf' heißen) dem Tag zufügen, dessen Inhalt bewegbar sein soll. Beispiel:
Dieser Text kann bewegt werden, aber dieser nicht.
Hier klicken um sich den Code anzuschauen:
<head>
<style>
.sf{position:relative;cursor:hand;color:black}
</style>
<script>
var zieh=false;var a,x,y
function beweg(){
if (event.button= =1&&zieh){
a.style.pixelLeft=p1+event.clientX-x
a.style.pixelTop=p2+event.clientY-y
return false}}
function gj(){
if (event.srcElement.className= ="sf"){
zieh=true;a=event.srcElement
p1=a.style.pixelLeft
p2=a.style.pixelTop
x=event.clientX;y=event.clientY
document.onmousemove=beweg}}
document.onmousedown=gj
document.onmouseup=new Function("zieh=false")
</script></head> Beispiel wie das Attribut class dem entsprechenden Tag zugefügt wird:
<img src="bild.jpg" class=sf> oder für Text <span class=sf>Bewegbarer Text</span>