nicht angemeldet
Hut sei mit euch!
Ich möchte bei einem Link-MouseOver per Javascript einen kleinen Beschreibungstext erzeugen. Ich möchte aber möglichst wenig in die Datei schreiben, bestenfalls fast alles zentral im Javascript definieren. Auch den MouseOver. Ich möchte mit dem Script einen Div-bereich positionieren, und seinen Inhalt ändern, am liebsten würde ich in dem Link nur noch den Beschreibungstext angeben. Nun die Frage: Kann ich den MouseOver-Effekt für das Element definieren? Aber irgendwie muss ich doch die Funktion aufrufen? Oder kann ich wenigstens irgendwie das onMouseOut angeben (bei dem der Text natürlich wieder verschwindet)? Wenn ja, wie?
kenntnisfrei
scorn
Hallo,
wer ist Hut?
folgende MSIE-only-Variante kann ich beisteuern:
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function init() {
var as = new Array();
as = document.getElementsByName("aToolTip");
for (var i=0; i<as.length; i++) {
as[i].onmouseout=mout;
}
}
function mover(text) {
var x = parseInt(window.event.x);
var y = parseInt(window.event.y);
document.getElementById("ttip").style.visibility="visible";
document.getElementById("ttip").style.position="absolute";
document.getElementById("ttip").style.backgroundColor="#FFBE00";
document.getElementById("ttip").style.top=y+"px";
document.getElementById("ttip").style.left=x+"px";
document.getElementById("ttip").style.zIndex="1";
document.getElementById("ttip").innerHTML=text;
}
function mout() {
document.getElementById("ttip").style.visibility="hidden";
}
//-->
</script>
<noscript></noscript>
</head>
<body onload="init();">
<h1>Überschrift</h1>
<p>Absatz. <a onmouseover="mover('Das ist der Beschreibungstext Nr. 1');" name="aToolTip" href="#">Link1</a> Rest des Absatzes.</p>
<p>Absatz. <a onmouseover="mover('Das ist der Beschreibungstext Nr. 2');" name="aToolTip" href="#">Link2</a> Rest des Absatzes.</p>
<p>Absatz. <a onmouseover="mover('Das ist der Beschreibungstext Nr. 3');" name="aToolTip" href="#">Link3</a> Rest des Absatzes.</p>
<div id="ttip" style="visibility:hidden;">fsdfsd sdddsfs dsfsdf</div>
</body>
</html>
Mir dem Event-Handling von DOM kannst Du das auch DOM-valide machen. Ich habe aber grade keinen DOM-fähigen Browser zum testen.
Gruß
Axel