Info Fenster mit Javascript ausgeben. Quelltext ist Freeware

Der Quelltext. Strg + A drücken und kopieren. Viel Spass damit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Info Fenster mit Javascript ausgeben. Quelltext ist Freeware</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="../styles.css">
<STYLE TYPE="text/css">
<!--
.fuss { font-family:Arial; font-size:8px; }
.f1 { padding:6px; font-family:Arial; font-size:18px; width:400px; color:#fc7636; background-color:#000000; }

A:link { font-family:Arial; text-decoration:none; font-size:10pt; line-height:18pt; color:#CFCFCF; font-weight:600; }
A:active {font-family:Arial; text-decoration:none; font-size:10pt; line-height:18pt; color:#CFCFCF; font-weight:600; }
A:visited {font-family:Arial; text-decoration:none; font-size:10pt; line-height:18pt; color:#CFCFCF; font-weight:600; }
A:hover {font-family:Arial; text-decoration:none; font-size:10pt; line-height:18pt; color:#EEF088; font-weight:600; }
//-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/* Dieses Script erzeugt Infofenster über Verweisen. */
/* von Heiner Sextro - www.sextro.de*/
/* Das Script ist frei. Sie dürfen es verändern und ausbauen.*/

/* erst mal ein Array für die Texte anlegen*/
var meinetexte = new Array();
/* Ich mache mir bei der Belegung der Feldelemente zu Nutze, daß meinetexte.length immer genau auf den nächsten verfügbaren Index zeigt.*/
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 0. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(0)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 1. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(1)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 2. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(2)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 3. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(3)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 4. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(4)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 5. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(5)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = 'Hier kommt der Inhalt für Fenster 6. Er wird im Anker mit <code>onmouseover="wechselmeinetexte(6)"</code> gesetzt und mit <code>onmouseout="wechselmeinetexte(-1)"</code> zurück gesetzt ';
meinetexte[meinetexte.length] = ' Tja. Was denken Sie was hier wen aufruft?';
meinetexte[meinetexte.length] = 'Beachten Sie die Kommentare im Quelltext. Sie dürfen den Quelltext benutzen und verändern. Über den Beibehalt des Kommentares <b> Dank an:</b> würde ich mich freuen.';

/* Die Variable abstand wird in der aus gabe dem Text voran gestellt. Hier sind es ein paar Brakes. So bleibt der Text immer unter der Maus.*/
var abstand = '<br><br><br>';

/* fenster_start enthält auch HTML und wird bei der Ausgabe jedem Text vorangestellt. Die Variable fenster_ende wird angehängt.*/
/* die Stylesheetklasse f1 können Sie verändern. Oder Sie definieren eine eigene Klasse und ändern in hier den String.*/
var fenster_start = '<span class="f1">';
/* Die Variable fenster_ende wird angehängt.*/
var fenster_ende = '</span>';

/* Die folgende Zeile ist wichtig. Hir wird dem onmousemove-Event eine Funktion zugewiesen. Ich habe sie mal mouse_handle genannt. */
document.onmousemove = mouse_handle;
/* Die Funktion Mouse_handle wird immer aufgerufen, wenn sich die Mouse bewegt. Also ziemlich oft.*/

/* Ab hier kommem die Funktionen */
function mouse_handle() 
{
/*mouse_handle positioniert immer wenn die Mouse bewegt wird das HTML-Element mit der ID text auf die Mousekoordinaten. Das Element folgt somit der Mouse.*/
var position_x = window.event.x;
var position_y = window.event.y;
document.getElementById('text').style.left = position_x;
document.getElementById('text').style.top = position_y;
}
function wechselmeinetexte(welche)
{
/* Diese Funktion wird aus den Eventhandlern der Verweise aufgerufen.*/
/* Sie ruft eine weitere Funktion auf, die dann die Ausgabe übernimmt.*/ 
if (welche == -1)
   {
   /* Wenn als Parameter -1 übergeben wird, wird ein leerer String ausgegeben. So wird dann das Infofenster wieder gelöscht. */
   schreibetext("");
   /* Geben Sie hier mal probehalber etwas zwischen den Hochkommata ein. */
   }
else
   {
   /* In jedem anderen Fall (ausser -1) wird hier der Text zum jeweiligen Verweis ausgegeben.*/
   schreibetext(abstand + fenster_start + meinetexte[welche] + fenster_ende);
   }
}
/**/
function schreibetext(temp)
{
/* Diese Funktion dient der Ausgabe */
/* getElementById("text") stellt die Kommunikation zu dem HTML-Element her, das im Body definiert ist. */
document.getElementById("text").style.visibility = "hidden";
/* Hier wird der HTML-Code mit dem in temp übergebenen Code ausgetauscht.*/
document.getElementById("text").innerHTML = temp;
document.getElementById("text").style.visibility = "visible";
}
/**/

/* Ich würde mich freuen, wenn Sie die folgende Kommentarzeile stehen liessen. Muss aber nicht.*/
/* Dank an: Heiner Sextro - www.sextro.de für die Anregungen zu diesem Script.*/
//-->
</script>
</HEAD>
<BODY BGCOLOR="#000033" TEXT="#F4E1BB">
<a name="top"></a>

<a href="http://www.sextro.de/seminar/index.html" target="_top">
[Zum Seminar]
</a>

<br>

<div id="text" style="position:absolute;top:400;left:400;"><br><br>Freeware</div>
</BODY>
</HTML>