DHTML - Image-Map mit dynamischer Textbeschreibung

Bild

Beim Überfahren des obigen Bildes (links) erscheint rechts davon ein passender Lauftext dazu.
Damit eignet sich dieses Script für kleine Bereiche einer Homepage als Navigation.

	Position in der html-Datei: head-Bereich
<script type="text/javascript"> <!-- var BrowserOK = (document.all)?true:((document.layer)?true:false); function GfxOver(Index,gfx) { if (BrowserOK) { TickerStop = false; start_ticker(Index); } } function GfxOut(Index,gfx) { if (BrowserOK) { clearTimeout(aktiv); TickerStop = true; clear_ticker(); } } var delay=20; var aktiv; var TickerStop = false; var msg = new Array ( 'Tipps und Tricks zum Aufbau einer WebSite.', 'Was Sie über Internet-Domains wissen sollten ...', 'Was Sie über Suchmaschinen in Beziehung zu Ihrer Homepage wissen sollten ...', '... ist der aktuelle Standard für WebDesign im Internet.', '... peppen auch Ihre Internetseite auf.', '... zum Nachschlagen für den Alltag und den WebDesigner.', '... damit die Installation und der Umgang leichter fällt.' ); var titlemsg = new Array ( 'Eigenes Webprojekt', 'Internet Domains', 'Suchmaschinen', 'XHTML', 'JavaScripts und JScripts', '<u>R</u>echner - <u>K</u>onverter - <u>T</u>abellen', 'JS-Menü-FAQ' ); function start_ticker(Index) { do_ticker(msg[Index], 0, titlemsg[Index]); } function clear_ticker() { var out=' '; if(navigator.appName=="Netscape") { with(document.xticker.document) { open(); write(out); close(); } } else { xticker.innerHTML=out; } } function do_ticker(text, pos, title) { // if (pos >= text.length) // var out='<table border=0 width=148><tr><td align=center><font color=#000000 size=-1><span style="font-family:verdana,sans-serif; font-size:8pt;">'+title+'<br>'+text.substring(0, pos)+'<\/span><\/font><\/td><\/tr><\/table>'; // else var out='<table border="0" width="210"><tr><td align="center"><span style="font-family:Arial,sans-serif">'+title+'<br><\/span><span style="font-family:Arial,sans-serif"> '+text.substring(0, pos)+'<\/span><\/td><\/tr><\/table>'; if (!TickerStop) { if(navigator.appName=="Netscape") { with(document.xticker.document) { open(); write(out); close(); } } else { xticker.innerHTML=out; } pos+=1; if (text[pos] == '<') { while (text[pos] != '>') { pos+=1; } pos+=1; } if(pos>text.length) { clearTimeout(aktiv); } else { aktiv=setTimeout('do_ticker("'+text+'",'+pos+',"'+title+'")', delay); } } } //--> </script>

	Position in der html-Datei: body-Bereich
<div id="Layer1"><img src="../_b/navi.gif" width="215" height="98" border="0" usemap="#nav_map" alt="" align="left"> <div id="xticker"></div></div> <map name="nav_map"> <area shape="rect" coords="0, 0, 215, 14" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(0)" alt="Eigenes Webprojekt"> <area shape="rect" coords="0, 15, 215, 28" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(1)" alt="Internet Domains"> <area shape="rect" coords="0, 29, 215, 42" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(2)" alt="Suchmaschinen"> <area shape="rect" coords="0, 43, 215, 56" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(3)" alt="XHTML"> <area shape="rect" coords="0, 57, 215, 70" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(4)" alt="JavaScript/JScript"> <area shape="rect" coords="0, 71, 215, 84" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(5)" alt="Rechner - Konverter - Tabellen"> <area shape="rect" coords="0, 85, 215, 98" href="nav.htm" onmouseout="GfxOut()" onmouseover="GfxOver(6)" alt="JS-Menü-FAQ"> </map>

Quelle: unbekannt Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten .