per onmouseover layer / schrift anzeigen

[ronin]

Hi zusammen.


Ich habe folgenden Code:

<ul style="width:100%;">
  <li style="background-color:#ffffff;">1. Argument</li>
  <li style="background-color:#ffffcc;">2. Argument</li>
  <li style="background-color:#ffff00;">3. Argument</li>
</ul>

Ich möchte nun in die einzelnen <li>-Tags ein onmouseover einfügen, welches mir einen kurzen Text anzeigen soll. Der title-Tag reicht in diesem Fall nicht aus, da es nicht sofortig angezeigt wird.

Frage ist also, wie ich einen -möglichst formatierbaren- kurzen Text anzeigen lassen kann.

<span style="width:200px;font-family:Verdana;font-size:10px;">
Anzeigetext
</span>

Das soll angezeigt werden und beim weiteren drüberfahren an der Maus mitlaufen ... wenns grad geht.


Kann mir da jemand nen Tip geben?


Danke und Grüße, Ronin

 

[Fabian H]

Der Textlayer muss dazu eine ID haben:

<span style="width:200px;font-family:Verdana;font-size:10px;" id="textinfo">&nbsp;</span>

Zunächst ist dieser leer (oder der Übersicht halber mit einem Nonbreakingspace versehen)

Beim drüberfahren mit der Maus von so einem Listenelement muss der Textinhalt des Layers geändert werden: Das geht mit der Eigenschaft innerHTML:

<ul style="width:100%;">
  <li style="background-color:#ffffff;" onMouseOver="window.document.getElementById('textinfo').innerHTML='Info zu Argument 1';"
    onMouseOut="window.document.getElementById('textinfo').innerHTML='';">1. Argument</li>
  <li style="background-color:#ffffcc;" onMouseOver="window.document.getElementById('textinfo').innerHTML='Info zu Argument 2';"
    onMouseOut="window.document.getElementById('textinfo').innerHTML='';">2. Argument</li>
  <li style="background-color:#ffff00;" onMouseOver="window.document.getElementById('textinfo').innerHTML='Info zu Argument 3';"
    onMouseOut="window.document.getElementById('textinfo').innerHTML='';">3. Argument</li>
</ul>