DHTML

mit der dynamischen HTML-Variation kommt Bewegung in die Seite. Sie kann sich zeitgesteuert verändern oder auf Ereignisse wie Mausklicks reagieren. Man sollte Grundwissen über HMTL, CSS, JavaScript und DOM ( Document Objects Model ) haben, um DHTML zu lernen. DOM ist eine standardisierte Beschreibung von Eigenschaften und Methoden der HTML-Objekte. Mit Hilfe von DOM kann man HTML-Elemente erzeugen, verändern bzw. löschen.

Die Beispiele anschauen und ausprobieren kann man hier .
Dort gibt es auch Erklärungen auf Englisch dazu.

In den Beispielen sind HTML-Befehle durch ein Leerzeichen ungültig gemacht worden.

Grundsätzliches:
HTML-Inhalt ändern
HTML-Attribut ändern
CSS-Stil ändern
HTML-Stil ändern
Auf HTML-Events reagieren
Eigenschaften eines HTML-Objekts:
Sichtbar / unsichtbar
Hintergrundfarbe
Liste der HTML-Events
Rechts-Klick sperren
Liste der HTML-Objekt-Eigenschaften
Beispiele:
Zeit-Steuerung
Tooltip simulieren
Ticker simulieren
Lauftext
Blinkender Text
Textfeld und Optionen
Checkboxen markieren
Hintergundfarbe einer Auswahlliste ändern
Hintergundfarbe eines Textfeldes ändern
Bilder:
Bilder austauschen
Bildeigenschaften ändern
Drag and Drop
Diashow
Wackelndes Bild
Bewegung:
Digitaluhr
Wackelndes Fenster
Wackelndes Link
Verzweigen aus Dropdown-Liste
Dropdown-Menüs
Immer oben bleiben
Gestaltung:
Inset/Outset Rahmen
Menü-Beschreibungen
Menü-Illustrationen
Cursor-Beschreibung
Cursor-Illustration
Schubladen-Menü
Schubladen-Menü mit Mausklick
Cursor:
Cursor-Koordinaten anzeigen
Cursor-Beschreibung
Cursor-Illustration

Wie man mit JavaScript den HTML-Inhalt verändern kann:

document.getElementById(id).innerHTML=new HTML

Beispiel:
< html>
< body>

< h1 id="header">Old Header< /h1>

< script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
< /script>

< /body>
< /html>  

Wie man mit JavaScript ein HTML-Attribut verändern kann:

document.getElementById(id).attribute=new value

Beispiel:
< html>
< body>

< img id="image" src="smiley.gif">

< script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
< /script>

< /body>
< /html> 

Wie man mit JavaScript einen CSS-Stil verändern kann:

document.getElementById(id).style.property=new style

Beispiel:
< html>
< body>

< h1 onclick="this.style.color='red'">Click Me!< /h1>

< /body>
< /html>

Wie man mit JavaScript den Stil eines HTML-Elements verändern kann:

document.getElementById(id).style.color=new color

Beispiel:
< html>
< body>

< h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Click Me!< /h1>

< /body>
< /html>

Wie man mit JavaScript auf HTML-Events reagieren kann:


< html>
< head>
< script type="text/javascript">
cc=0;
function changeimage()
{
if (cc==0) 
  {
  cc=1;
  document.getElementById('myimage').src="bulbon.gif";
  }
else
  {
  cc=0;
  document.getElementById('myimage').src="bulboff.gif";
  }
}
< /script>
< /head>

< body>

< img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100" height="180" />
< p>Click to turn on/off the light< /p>

< /body>
< /html>

Eigenschaften und Ereignisse in HTML

Visibility: sichtbar oder nicht

< html>
< body>

< p id="p1">This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.< /p>

< input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'" />
< input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'" />

< /body>
< /html>

BgChange: Hintergrundfarbe verändern

< html>
< head>

< script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
< /script>
< /head>

< body>

< b>Mouse over the squares and the background color will change!< /b>

< table width="300" height="100">
 < tr>
  < td onmouseover="bgChange('red')" 
      onmouseout="bgChange('transparent')"
      bgcolor="red">
  < /td>
  < td onmouseover="bgChange('blue')" 
      onmouseout="bgChange('transparent')"
      bgcolor="blue">
  < /td>
  < td onmouseover="bgChange('green')" 
      onmouseout="bgChange('transparent')"
      bgcolor="green">
  < /td>
< /tr>
< /table>

< /body>
< /html>

HTML-Ereignisse


onload   			< body onload="mymessage()">	
onunload			< body onunload="mymessage()">
onchange			< select id="browsers" onchange="preferedBrowser()">
onsubmit			< form onsubmit="confirmInput()" action="http://www.w3schools.com/"> ... < input type="submit">
onreset				< form onreset="message()">  ... < input type="reset">
onselect			< input type="text" value="Select this text" onselect="message()" size="20">
onblur				< input type="text" onblur="message()" size="20">   'lost focus'
onfocus				< input type="text" onfocus="message()" size="20">
onkeydown			< input type="text" name="myInput" onkeydown="writeMessage()" size="20">
onkeyup				< input type="text" name="myInput" onkeyup="writeMessage()" size="20">
onkeydown vs onkeyup		--> onkeyup ist der Normalzustand !
onkeypress			< body onkeypress="message()">
onmouseover & onmouseout	< h1 onmouseover="style.color='red'" onmouseout="style.color='black'">
onclick				< img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100" height="180" />
ondblclick			< th ondblclick="gettip()" valign="top">W3Schools.com  			
onmousedown & onmouseup		< img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
onmousemove			< body onmousemove="moveright()">
onerror

Beispiel: Rechts-Klick sperren

< html>
< head>
< script type="text/javascript">
document.onmousedown=disable; //IE
message="Sorry no rightclick on this page.\nNow you cannot view my source\nand you cannot steal my images";
function disable(e)
{
if (e == null)
  { //IE disable
  e = window.event;
  if (e.button==2)
    {
    alert(message);
    return false;
    }
  }
document.onclick=ffdisable;  //FF
}
function ffdisable(e)
{
if (e.button==2)
  { //firefox disable
  e.preventDefault();
  e.stopPropagation();
  alert(message);
  return false;
  }
}
< /script>
< /head>

< body>
< p>Right-click on this page to trigger the event.< /p>
< p>Note that this does not guarantee that someone won't view the page source or steal the images.< /p>
< /body>
< /html>


HTML-Texte manipulieren

Element ändern 			< h1 onclick="this.style.color='red'">Click Me!< /h1>
Attribut ändern			< script type="text/javascript"> document.getElementById("image").src="landscape.jpg"; < /script>
innerHTML ändern		< script type="text/javascript"> document.getElementById("header").innerHTML="New Header"; < /script>
Position ändern			document.getElementById('header').style.position="absolute"; document.getElementById('header').style.left="0";
Textgröße ändern		document.getElementById('msg').style.fontSize=txtsize;
Hintergrundfarbe ändern		document.getElementById('x').style.background=color;
Textfarbe ändern		document.getElementById('x').style.color=color;
Hintergrundbild ändern		document.getElementById('x').style.background="url(" + bg + ")";

Zeit-Steuerung


Beispiel:
< html>
< head>

< script type="text/javascript">
var i=1
function starttimer()
{
document.getElementById('h_one').style.position="relative";
document.getElementById('h_one').style.left=+i;
document.getElementById('h_two').style.position="relative";
document.getElementById('h_two').style.top=+i;
i++;
timer=setTimeout("starttimer()",10);
}

function stoptimer()
{
clearTimeout(timer);
}
< /script>

< /head>
< body onload="starttimer()" onunload="stoptimer()">

< h1 id="h_one">Header one
< h1 id="h_two">Header two

< /body>
< /html>

Tooltip simulieren


Beispiel:
< html>
< head>
< script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML=txt;
}

function reset()
{
document.getElementById('tip').innerHTML="";
}
< /script>
< /head>

< body>
< p>Mouse over these drinks:< /p>

< span onmouseover="gettip('Hot black drink')"
onmouseout="reset()">Coffee< /span>
< br />< br />
< span onmouseover="gettip('Cold white drink')"
onmouseout="reset()">Milk< /span>

< p id="tip">< /p>
< /body>
< /html>

Ticker simulieren


Beispiel:
< html>
< head>

< script type="text/javascript">
message="The best way to learn, is to study examples. -www.W3Schools.com";
pos=0;
maxlength=message.length+1;

function writemsg()
{
if (pos
< /head>

< body onload="writemsg()" onunload="stoptimer()">
< form>
< input id="msgfield" size="65">
< /form>
< /body>
< /html>

Lauftext


Beispiel:

< html>
< head>
< style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
< /style>
< script type="text/javascript">
var interval;
startPosition=0;
topPosition=100;
endPosition=100;
speed=50;

function scrollit()
{
if (startPosition!=200)
	{
	startPosition=startPosition+1;
	topPosition=topPosition-1;
	document.getElementById('display').style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)";
	document.getElementById('display').style.top=topPosition;
	interval=setTimeout("scrollit()",speed);
	}
else
	{
	startPosition=0;
	topPosition=100;
	endPosition=100;
	interval=setTimeout("scrollit()",speed);
	}
}

function stopinterval()
{
clearTimeout(interval);
}
< /script>
< /head>


< span id="display">< br />< br />< br />< br />< br />< br />< br />
Hello Developers, this script makes a scrolling text. < br />Visit W3Schools.com
< /span>
< /body>
< /html>

Blinkender Text


Beispiel:
< html>
< head>
< script type="text/javascript">
function blinking_header()
{
if (!document.getElementById('blink').style.color)
	{
	document.getElementById('blink').style.color="red";
	}
if (document.getElementById('blink').style.color=="red")
	{
	document.getElementById('blink').style.color="black";
	}
else
	{
	document.getElementById('blink').style.color="red";
	}
timer=setTimeout("blinking_header()",100);
}

function stoptimer()
{
clearTimeout(timer);
}
< /script>
< /head>

< body onload="blinking_header()" onunload="stoptimer()">
< h1 id="blink">Blinking header< /h1> 
< /body>

< /html>

Formulare

Textfeld und Option

< html>
< head>
< script type="text/javascript">
function sameInfo()
{
for (i=0; i
<  /head>


< form name="myForm1">
First name: < input type="text" name="option">< br />
Last name: < input type="text" name="option">< br />
Address: < input type="text" name="option">< br />
E-mail: < input type="text" name="option">< br />
< br />
< input type="button" onclick="sameInfo()" value="Same information below">< br />
< /form>

< form name="myForm2">
First name: < input type="text" name="option">< br />
Last name: < input type="text" name="option">< br />
Address: < input type="text" name="option">< br />
E-mail: < input type="text" name="option">< br />
< /form>

< /body>
< /html>


Checkboxen markieren

< html>
< head>
< script type="text/javascript">
function makeCheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
	{
	thisForm.option[i].checked=true;
	}
}

function makeUncheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
	{
	thisForm.option[i].checked=false;
	}
}
< /script>
< /head>
< body>

< form name="myForm">
< input type="button" value="Check" onclick="makeCheck(this.form)">
< input type="button" value="Uncheck" onclick="makeUncheck(this.form)">
<  br />
< input type="checkbox" name="option">Apples< br />
< input type="checkbox" name="option">Oranges< br />
< input type="checkbox" name="option">Bananas< br />
< input type="checkbox" name="option">Melons
< /form>

< /body>
< /html>

Hintergrundfarbe einer Auswahlliste ändern

< html>
< head>
< script type="text/javascript">
function changeColor(color)
{
myForm.elements[0].style.background=color;
}
< /script>
< /head>
< body>

< p>This example demonstrates how to change the background color of an option list.< /p>
< p>Mouse over the three colored table cells, and the option list will change color:< /p>

< table width="100%">< tr>
< td bgcolor="red" onmouseover="changeColor('red')"> < /td>
< td bgcolor="blue" onmouseover="changeColor('blue')"> < /td>
< td bgcolor="green" onmouseover="changeColor('green')"> < /td>
< /tr>< /table>

< form name="myForm">
< select>
< option>Mouse over the colored table cells< /option>
< option>Mouse over the colored table cells< /option>
< option>Mouse over the colored table cells< /option>
< option>Mouse over the colored table cells< /option>
< /select>
< /form>

< /body>
< /html>


Hintergrundfarbe eines Textfeldes ändern

< html>
< head>
< script type="text/javascript">
function newColor(color)
{
document.getElementById('x').style.background=color;
}
< /script>
< /head>
< body>

< p>This example demonstrates how to change
the background color of a textarea.< /p>

< p>Mouse over the three colored table cells,
and the textarea will change color:< /p>

< table width="100%">< tr>
< td bgcolor="red" onmouseover="newColor('red')"> < /td>
< td bgcolor="blue" onmouseover="newColor('blue')"> < /td>
< td bgcolor="green" onmouseover="newColor('green')"> < /td>
< /tr>< /table>

< form>
< textarea id="x" rows="5" cols="20">
This example can not be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
< /textarea>
< /form>

< /body>
< /html>

Bilder

Bilder austauschen

< html>
< head>
< script type="text/javascript">
img2=new Image();
img2.src="landscape3.gif";
function changeImage()
{
document.getElementById('myImage').src=img2.src;
}
< /script>
< /head>

< body>

< p>When you mouse over the image, a new image will appear.< /p>
< img id="myImage" onmouseover="changeImage()" border="0" width="160" height="120" src="landscape2.jpg">
< p>The new image appears instantly, because your browser has already loaded the image.< /p>

< /body>
< /html>


Bildeigenschaften ändern

Breite			document.getElementById('image').width="200";
Höhe			document.getElementById('image').height="360";
Quelle			document.getElementById('image').src="bulbon.gif";
Position		document.getElementById('image').style.position="absolute"; document.getElementById('image').style.left="0";
Hintergrundbild 	document.body.background=bg;

Bewegtes Bild

< html>
< head>
< script type="text/javascript">
var i=1
function starttimer()
{
document.getElementById('myimage').style.position="relative";
document.getElementById('myimage').style.left=+i;
i++;
timer=setTimeout("starttimer()",10);
}
function stoptimer()
{
clearTimeout(timer);
}
< /script>
< /head>

< body onload="starttimer()" onunload="stoptimer()">
< img id="myimage" src="smiley.gif" width="32" height="32" />
< /body>
< /html>

Drag and Drop

< html>
< head>

< style>
img
{
position:absolute;
}


< script type="text/javascript">
document.onmousedown=coordinates;
document.onmouseup=mouseup;

function coordinates(e)
{
if (e == null) { e = window.event;}
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

if (sender.id=="moveMe")
  {
  mouseover=true;
  pleft=parseInt(movMeId.style.left);
  ptop=parseInt(movMeId.style.top);
  xcoor=e.clientX;
  ycoor=e.clientY;
  document.onmousemove=moveImage;
  return false;
  }
else { return false; }
}

function moveImage(e)
{
if (e == null) { e = window.event;}
movMeId.style.left=pleft+e.clientX-xcoor+"px";
movMeId.style.top=ptop+e.clientY-ycoor+"px";
return false;
}

function mouseup(e)
{
document.onmousemove=null;
}
< /script>
< /head>
< body>

< img id="moveMe" src="smiley.gif" width="32" height="32" />
< p>Drag and drop the image< /p>

< script type="text/javascript">
//The movable image
movMeId=document.getElementById("moveMe");
//image starting location
movMeId.style.top="75px";
movMeId.style.left="75px";
< /script>
< /body>
< /html>

Diashow

< html>
< head>
< script type="text/javascript">
myImages=new Array();
myImages[0]="w3schools.gif";
myImages[1]="bulbon.gif";
myImages[2]="landscape.jpg";
myImages[3]="w3schools.gif";
myImages[4]="bulboff.gif";
myImages[5]="smiley.gif";
imagecounter=myImages.length-1;
i=0;

function first()
{
document.getElementById('imageviewer').src=myImages[0];
i=0;
}

function previous()
{
if (i>0)
	{
	i--;
	document.getElementById('imageviewer').src=myImages[i];
	}
}

function next()
{
if (i
< /head>

< body>
< center>
< form>
< input type="button" value="First" onclick="first()">
< input type="button" value="Previous" onclick="previous()">
< input type="button" value="Next" onclick="next()">
< input type="button" value="Last" onclick="last()">
< /form>
< img id="imageviewer" src="w3schools.gif" alt="w3Scools" width="100" height="30" />
< /center>
< /body>
< /html>

Wackelndes Bild

< html>
< head>
< script type="text/javascript">
function shakeleft()
{
document.getElementById('image').style.position="relative";
document.getElementById('image').style.left="3";
timer=setTimeout("shakeright()",10);
}

function shakeright()
{
document.getElementById('image').style.left="0";
timer=setTimeout("shakeleft()",10);
}

function stoptimer()
{
clearTimeout(timer);
}
< /script>
< /head>

< body>
< b>Mouse over the image to see it shake< /b>< br />
< img id="image" src="smiley.gif"
onmouseover="shakeleft()"
onmouseout="stoptimer()" width="32" height="32" />
< /body>

< /html>


Digitaluhr


< html>
< head>
< script type="text/javascript">
function getDigits()
{
num=new Array("0fdr.gif","1fdr.gif","2fdr.gif","3fdr.gif","4fdr.gif","5fdr.gif","6fdr.gif","7fdr.gif","8fdr.gif","9fdr.gif");
time=new Date();
hour=time.getHours()
if (hour<10)
	{
	document.getElementById('hour1').src=num[0];
	h2="'" + hour + "'";
	h2=h2.charAt(1);
	document.getElementById('hour2').src=num[h2];
	}
else
	{
	h1="'" + hour + "'";
	h1=h1.charAt(1);
	document.getElementById('hour1').src=num[h1];
	h2="'" + hour + "'";
	h2=h2.charAt(2);
	document.getElementById('hour2').src=num[h2];
	}
minute=time.getMinutes();
if (minute<10)
	{
	document.getElementById('minute1').src=num[0];
	m2="'" + minute + "'";
	m2=m2.charAt(1);
	document.getElementById('minute2').src=num[m2];
	}
else
	{
	m1="'" + minute + "'";
	m1=m1.charAt(1);
	document.getElementById('minute1').src=num[m1];
	m2="'" + minute + "'";
	m2=m2.charAt(2);
	document.getElementById('minute2').src=num[m2];
	}
second=time.getSeconds();
if (second<10)
	{
	document.getElementById('second1').src=num[0];
	s2="'" + second + "'";
	s2=s2.charAt(1);
	document.getElementById('second2').src=num[s2];
	}
else
	{
	s1="'" + second + "'";
	s1=s1.charAt(1);
	document.getElementById('second1').src=num[s1];
	s2="'" + second + "'";
	s2=s2.charAt(2);
	document.getElementById('second2').src=num[s2];
	}
}
function showTime()
{
timer=setTimeout("getDigits()",10);
interval=setInterval("getDigits()",1000);
}
function stopInterval()
{
clearTimeout(timer);
clearInterval(interval);
}
< /script>
< /head>

< body onload="showTime()" onunload="stopInterval()" bgcolor="#000000">
< img id="hour1" />
< img id="hour2" />
< img id="minute1" />
< img id="minute2" />
< img id="second1" />
< img id="second2" />
< /body>
< /html>

Fenster

Wackelndes Fenster

< html>
< head>
< script>
function startEQ()
{
richter=5;
parent.moveBy(0,richter);
parent.moveBy(0,-richter);
parent.moveBy(richter,0);
parent.moveBy(-richter,0);
timer=setTimeout("startEQ()",10);
}
function stopEQ()
{
clearTimeout(timer);
}
< /script>
< /head>
< body>

< form>
< input type="button" onclick="startEQ()" value="Start an earthquake">
< br />
< br />
< input type="button" onclick="stopEQ()" value="Stop the earthquake">
< /form>

< /body>
< /html>

Wackelndes Link

< html>
< head>
< script type="text/javascript">
function shakeleft()
{
document.getElementById('myLink').style.position="relative";
document.getElementById('myLink').style.left="3";
timer=setTimeout("shakeright()",10);
}
function shakeright()
{
document.getElementById('myLink').style.left="0";
timer=setTimeout("shakeleft()",10);
}
function stoptimer()
{
clearTimeout(timer);
}
< /script>
< /head>

< body>
< a id="myLink" href="http://www.w3schools.com/"
onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse over this link< /a>
< /body>

< /html>

Verzweigen aus Dropdown-Liste


< html>
< head>

< script type="text/javascript">

function go()
{
location=document.forms[0].gowhere.value;
}

< /script>

< /head>
< body>

< form>
< select id="gowhere" onchange="go()">
< option>-Select location-
< option value="/asp/default.asp">ASP Coding
< option value="/flash/default.asp">Flash Tutorial
< option value="/js/default.asp">JavaScripts
< /select>
< /form>

< /body>
< /html>

Dropdown-Menüs

< html>
< head>
< style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
< /style>
< script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
< /script>
< /head>

< body>
< h3>Drop down menu< /h3>
< table width="100%">
 < tr bgcolor="#FF8080">
  < td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
   < a href="/default.asp">Tutorials< /a>< br />
   < table class="menu" id="tutorials" width="120">
   < tr>< td class="menu">< a href="/html/default.asp">HTML< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/xhtml/default.asp">XHTML< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/css/default.asp">CSS< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/xml/default.asp">XML< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/xsl/default.asp">XSL< /a>< /td>< /tr>
   < /table>
  < /td>
  < td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   < a href="/default.asp">Scripting< /a>< br />
   < table class="menu" id="scripting" width="120">
   < tr>< td class="menu">< a href="/js/default.asp">JavaScript< /a>< /tr>
   < tr>< td class="menu">< a href="/vbscript/default.asp">VBScript< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="default.asp">DHTML< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/asp/default.asp">ASP< /a>< /td>< /tr>
   < tr>< td class="menu">< a href="/ado/default.asp">ADO< /a>< /td>< /tr>
   < /table>
  < /td>
  < td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   < a href="/site/site_validate.asp">Validation
< table class="menu" id="validation" width="120"> < tr>< a href="/site/site_validate.asp">Validate HTML< /a>< /td>< /tr> < tr>< a href="/site/site_validate.asp">Validate XHTML< /a>< /td>< /tr> < tr>< a href="/site/site_validate.asp">Validate CSS< /a>< /td>< /tr> < tr>< a href="/site/site_validate.asp">Validate XML< /a>< /td>< /tr> < tr>< a href="/site/site_validate.asp">Validate WML< /a>< /td>< /tr> < /table> < /td> < /tr> < /table> < p>Mouse over these options to see the drop down menus< /p> < /body> < /html>

Immer oben bleiben


< html>
< head>
< script type="text/javascript">
var timer;
function scrolltop()
{
document.getElementById('scrollmenu').style.top=document.body.scrollTop;
timer=setTimeout("scrolltop()",1);
}
function stoptimer()
{
clearTimeout(timer);
}
< /script>
< /head>

< body onload="scrolltop()" onunload="stoptimer()">
< span id="scrollmenu" style="position:absolute">
< b>Menu< /b>< br />
< a href="http://www.w3schools.com">W3Schools< /a>< br />
< a href="http://www.microsoft.com">Microsoft< /a>< br />
< a href="http://www.altavista.com">Altavista< /a>< br />
< /span>

< table border="0" width="100%">
< tr>
< td width="100"> 
< td>Scroll this page to see the "always-on-top" menu
< br /> 
< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> Scroll this page to see the "always-on-top" menu < br />< br />< br />< br />< br /> < /td> < /tr> < /table> < /body> < /html>

Inset/Outset Rahmen

< html>
< head>

< script type="text/javascript">
function inset(elmnt)
{
elmnt.style.borderStyle="inset";
}

function outset(elmnt)
{
elmnt.style.borderStyle="outset";
}
< /script>

< style>
td
{
background:C0C0C0;
border:2px outset;
}

< /style>
< /head>
< body>
< table width="80">
< tr>< td onmouseover="inset(this)" onmouseout="outset(this)">< a href="/default.asp">HOME< /a>< /td>< /tr>
< tr>< td onmouseover="inset(this)" onmouseout="outset(this)">< a href="/js/default.asp">JavaScript< /a>< /td>< /tr>
< tr>< td onmouseover="inset(this)" onmouseout="outset(this)">< a href="/html/default.asp">HTML< /a>< /td>< /tr>
< tr>< td onmouseover="inset(this)" onmouseout="outset(this)">< a href="http://www.google.com">Google< /a>< /td>< /tr>
< /table>

< /body>
< /html>

Menü-Beschreibungen

< html>
< head>
< style>
table
{
background:black;
}
a
{
text-decoration:none;
color:#000000;
}
th
{
width:150px;
background:#FF8080;
}
td
{
font:bold;
background:#ADD8E6;
}
< /style>
< script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML=txt;
}
function reset()
{
document.getElementById('tip').innerHTML=" ";
}
< /script>
< /head>

< body>
< b>Mouse over the links to see their descriptions< /b>< br />
< table width="400px">
< tr>
< th>
< a href="http://www.w3schools.com" 
onmouseover="gettip('W3Schools is the best Web Developers resource on the Web')"
onmouseout="reset()">W3Schools.com< /a>
< /th>
< td rowspan="3" id="tip"> < /td>
< /tr>
< tr>
< th>
< a href="http://www.microsoft.com" onmouseover="gettip('Internet Explorer is winning the browser war')"
onmouseout="reset()">Internet Explorer< /a>
< /th>
< /tr>
< tr>
< th>
< a href="http://my.netscape.com" onmouseover="gettip('The Navigator is Netscapes browser tribute to web surfers')"
onmouseout="reset()">Netscape Navigator< /a>
< /th>
< /tr>
< /table>

< /body>
< /html>

Menü-Illustrationen

< html>
< head>
< style>
table
{
background:black;
}
a
{
text-decoration:none;
color:#000000;
}
th
{
width:150px;
background:#FF8080;
}
td
{
font:bold;
background:#ADD8E6;
}
< /style>
< script type="text/javascript">
function gettip(image)
{
document.getElementById('tip').innerHTML="< img src='" + image + "' />";
}
function reset()
{
document.getElementById('tip').innerHTML=" ";
}
< /script>
< /head>

< body>
< b>Mouse over the links to see their logos< /b>< br />
< table width="400px">
< tr>
< th>
< a href="/default.asp" 
onmouseover="gettip('w3schools.gif')"
onmouseout="reset()">W3Schools.com< /a>
< /th>
< td rowspan="3" id="tip" align="center" valign="center"> < /td>
< /tr>
< tr>
< th>
< a href="http://www.microsoft.com"
onmouseover="gettip('microsoft.gif')"
onmouseout="reset()">Internet Explorer< /a>
< /th>
< /tr>
< /tr>
< tr>
< th>
< a href="http://my.netscape.com"
onmouseover="gettip('netscapelink.gif')"
onmouseout="reset()">Netscape Navigator< /a>
< /th>
< /tr>
< /table>
< /body>

< /html>

Cursor-Beschreibung

< html>
< head>
< style>
body
{
background:#000000;
color:#00FF00;
font-weight:bold;
}
a{color:#CCCCCC;}
< /style>

< script type="text/javascript">
function cursor(text)
{
trail.innerHTML=text;
trail.style.visibility="visible";
trail.style.position="absolute";
trail.style.left=event.clientX+10;
trail.style.top=event.clientY;
}

function hidecursor()
{
trail.style.visibility="hidden";
}
< /script>

< /head>
< body>

< h1>Mouse over these links< /h1>

< a href="/default.asp" onmousemove="cursor('Visit W3Schools.com')" onmouseout="hidecursor()">W3Schools.com< /a>< br />
< a href="http://www.altavista.com" onmousemove="cursor('Go to AltaVista')" onmouseout="hidecursor()">AltaVista< /a>< br />
< a href="http://www.yahoo.com" onmousemove="cursor('Search with Yahoo!')" onmouseout="hidecursor()">Yahoo!< /a>< br />

< span id="trail" style="visibility:hidden">Hello< /span>

< /body>
< /html>

Cursor-Illustrierung

< html>
< head>
< script type="text/javascript">
function cursor(image)
{
trail.innerHTML="< img src='" + image + "' />";
trail.style.visibility="visible";
trail.style.position="absolute";
trail.style.left=event.clientX+10;
trail.style.top=event.clientY;
}

function hidecursor()
{
trail.style.visibility="hidden";
}
< /script>

< /head>
< body>

< h1>Mouse over these links< /h1>
< a href="/default.asp" onmousemove="cursor('w3schools.gif')" onmouseout="hidecursor()">W3Schools.com< /a>< br />
< a href="http://www.altavista.com" onmousemove="cursor('altavistalink.gif')" onmouseout="hidecursor()">AltaVista< /a>< br />
< a href="http://www.yahoo.com" onmousemove="cursor('yahoolink.gif')" onmouseout="hidecursor()">Yahoo!< /a>< br />

< span id="trail" style="visibility:hidden">Hello< /span>

< /body>
< /html>

Schubladen-Menü

< html>
< head>
< style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
}
< /style>
< script type="text/javascript">
var i=-135;
var intHide;
var speed=3;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
	{
	i=i+speed;
	document.getElementById('myMenu').style.left=i;
	}
}
function hide()
{
if (i>-135)
	{
	i=i-speed;
	document.getElementById('myMenu').style.left=i;
	}
}
< /script>
< /head>

< body>
< table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
< tr>< td class="menu">< a href="/default.asp">HOME< /a>< /td>
< td rowspan="5" align="center" bgcolor="#FF8080">M< br />E
N< br />U< /td>< /tr> < tr>< td class="menu">< a href="/asp/default.asp">ASP< /a>< /td>< /tr> < tr>< td class="menu">< a href="/js/default.asp">JavaScript< /a>< /td>< /tr> < tr>< td class="menu">< a href="default.asp">DHTML< /a>< /td>< /tr> < tr>< td class="menu">< a href="/vbscript/default.asp">VBScript< /a>< /td>< /tr> < /table> < p>Mouse over the MENU to show/hide the menu< /p> < p>Try changing the "speed" variable in the script, to change the menus's sliding speed< /p> < /body> < /html>

Schubladen-Menü mit Mausklick

< html>
< head>
< style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
margin-left:3px;
}
< /style>
< script type="text/javascript">
var i=-135;
var c=0;
var intHide;
var speed=3;
function show_hide_menu()
{
if (c==0)
	{
	c=1;
	clearInterval(intHide);
	intShow=setInterval("show()",10);
	}
else
	{
	c=0;
	clearInterval(intShow);
	intHide=setInterval("hide()",10);
	}
}
function show()
{
if (i<-12)
	{
	i=i+speed;
	document.getElementById('myMenu').style.left=i;
	}
}
function hide()
{
if (i>-135)
	{
	i=i-speed;
	document.getElementById('myMenu').style.left=i;
	}
}
< /script>
< /head>

< body>
< table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
< tr>< td class="menu">< a href="/default.asp">HOME< /a>< /td>
< td rowspan="5" align="center" bgcolor="#FF8080">M
E< br />N< br />U< /td>< /tr> < tr>< a href="/asp/default.asp">ASP< /a>< /td> < tr>< a href="/js/default.asp">JavaScript< /a>< /td>< /tr> < tr>< a href="default.asp">DHTML< /a>< /td>< /tr> < tr>< a href="/vbscript/default.asp">VBScript< /a>< /td>< /tr> < /table> < p>Click on the MENU to show/hide the menu< /p> < p>Try changing the "speed" variable in the script, to change the menus's sliding speed< /p> < /body> < /html>

Cursor-Koordinaten anzeigen

< html>
< head>
< script type="text/javascript">
function show_coords(event)
{
x=event.clientX;
y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
< /script>
< /head>

< body onmousedown="show_coords(event)">
< p>Click in the document. An alert box will alert the x and y coordinates of the cursor.< /p>
< /body>
< /html>

Cursor-Beschreibung

< html>
< head>
< script type="text/javascript">
function cursor(event)
{
document.getElementById('trail').style.visibility="visible";
document.getElementById('trail').style.position="absolute";
document.getElementById('trail').style.left=event.clientX+10;
document.getElementById('trail').style.top=event.clientY;
}
< /script>
< /head>

< body onmousemove="cursor(event)">
< h1>Move the cursor over this page< /h1>
< span id="trail" style="visibility:hidden">Cursor Text< /span>
< /body>
< /html>

Cursor-Illustration

< html>
< head>
< script type="text/javascript">
function cursor(event)
{
document.getElementById('trail').style.visibility="visible";
document.getElementById('trail').style.position="absolute";
document.getElementById('trail').style.left=event.clientX+10;
document.getElementById('trail').style.top=event.clientY;
}
< /script>
< /head>

< body onmousemove="cursor(event)">
< h1>Move the cursor over this page< /h1>
< img id="trail" style="visibility:hidden" src="w3schools.gif" width="100" height="30">
< /body>

< /html>