onmouseover Text anzeigen (ähnlich wie bei Bildern mit "alt"

**TobiaZ** · 05-04-2009, 18:25

ich möchte, dass wenn man mit der Maus auf einen Bereich gleitet, ein Text angezeigt wird.

title=""

ich möchte, dass wenn man mit der Maus auf einen Bereich gleitet, ein Text angezeigt wird. Ähnlich wie bei Bildern mit der "alt" - Anweisung.

Bei richtiger HTML-Interpretation werden Alternativtexte gar nicht (mehr) beim MouseOver angezeigt, sondern nur an Stelle des Bildes beim nicht vorhanden sein des selbigen.

**mac4design** · 23-04-2009, 19:06

Ich denke dass du sog. "Tooltips" meinst, und das alt-attribut ist eig das title-attribut. Google mal nach jQuery und Tooltip.

**bbrueck** · 25-05-2009, 12:56

Man kann das schon mit nem title-Tag machen, jedoch hat das einige Nachteile, wie z.B. dass der Tooltip nur relativ kurz gezeigt wird und man lange Texte eventuell nicht komplett lesen kann in der zeit.

Man kann dafür auch eine Javascript Funktion nutzen, die divs von display:none auf display:block setzt, beim Mouseover.

Code:

function showtip( obj ) {
  if( obj == null ) { return false; }
  
  tooltip = document.getElementById("tooltip-" + obj.id);
  tooltip.style.display = "block";
}

function hidetip(obj){
  if( obj == null ) { return false; }
  
  tooltip = document.getElementById("tooltip-" + obj.id );
  tooltip.style.display = "none";
}

Du hast dann z.B.

HTML Code:

<img src="bild.jpg" alt="Ein Bild" onmouseover="showtip(this)" onmouseout="hidetip(this)" id="bild-1" />

wichtig hier außer den Events ist id="bild-1", weil das im Javascript dazu verwendet wird den zugehörigen Tooltip zu finden.
Wenn du jetzt zu bild-1 einen Tooltip erstellen möchtest benutzt du

HTML Code:

<div id="tooltip-bild-1" style="display: none;">Ich bin der Tooltip zu Bild-1</div>

Lediglich um die Positionierung und Formatierung des Divs müsstest du dir nochmal Gedanken machen.

**Olli4** · 25-05-2009, 16:14

Edit: Sorry war im falschen thema. kann gelöscht werden

onmouseover Text anzeigen (ähnlich wie bei Bildern mit "alt"