nicht angemeldet
eventhandling
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
-
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
scornHallo,
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
-
Hut sei mit dir!
Hut ist zweitoberster Gegenstand der Begehrung in der nach ihm benannten HUTSEKTE (http://users.skynet.be/fa048778/hutsekte/index.html)
Na, das Script (so ähnlich) hatte ich mir auch schon zusammengestrickt, ich wollte aber eben die Eventhandler in das Script einbauen. Da das mit meinem logischen Denken eh nicht vereinbar war, lass ich das mal... Und wenn mir erfahrene Programmierer mein eigenes Script zeigen, dann fühle ich mich schon bestätigt!hütlichst
scornPS.: HÜTET EUCH!
-
Hut sei mit dir!
Hut ist zweitoberster Gegenstand der Begehrung in der nach ihm benannten HUTSEKTE (http://users.skynet.be/fa048778/hutsekte/index.html)Danke für den Missionierungsversuch. Ich bleibe aber Anhänger von Offler, dem blinden Io, der Lady ... Mögen die restlichen Götter der Scheibenwelt mir verzeihen! ;-))
Na, das Script (so ähnlich) hatte ich mir auch schon zusammengestrickt, ich wollte aber eben die Eventhandler in das Script einbauen. Da das mit meinem logischen Denken eh nicht vereinbar war, lass ich das mal... Und wenn mir erfahrene Programmierer mein eigenes Script zeigen, dann fühle ich mich schon bestätigt!
Naja, zumindest onmouseout must Du nicht mehr in jedem Link definieren. Das Problem mit onmouseover ist die Übergabe des Objektes, welches das Ereignis auslöst. Wenn das irgendwie herauszubekommen ist, kann auch eine Funktion mover(ev) für alle Links einheitlich in der init() definiert werden. Mit dem DOM-Eventhandling sollte das möglich sein:
http://selfhtml.teamone.de/dhtml/modelle/dom.htm#event_handlingGruß
Axel
-
Hut sei mit dir!
Hut ist zweitoberster Gegenstand der Begehrung in der nach ihm benannten HUTSEKTE (http://users.skynet.be/fa048778/hutsekte/index.html)Danke für den Missionierungsversuch. Ich bleibe aber Anhänger von Offler, dem blinden Io, der Lady ... Mögen die restlichen Götter der Scheibenwelt mir verzeihen! ;-))
Schuh möge dich morden!
Naja, zumindest onmouseout must Du nicht mehr in jedem Link definieren. Das Problem mit onmouseover ist die Übergabe des Objektes, welches das Ereignis auslöst. Wenn das irgendwie herauszubekommen ist, kann auch eine Funktion mover(ev) für alle Links einheitlich in der init() definiert werden. Mit dem DOM-Eventhandling sollte das möglich sein
Okay, wegen der detaillierten und brauchbaren Hilfe kann er's bleiben lassen. Also mit DOM wär's dann firstChild.nodeValue statt innerHTML.
Naja, das das mit dem onMouseOver nicht geht war ja eigentlich klar. Woran soll der Brausa das auch festmachen, wenn er nicht weiß von wo es aus geht. ich mach's jetzt wieder mit onMouseOver dann muss ich mir den Arraykram nicht beibringen, und in the end kommt's ja auf die selbe Schreibarbeit. So verstehe ich den Quelltext wieder, und habe auch nicht mehr das Problem, dass die Div's die ich früher einfach per Script positioniert und in's visible gesetzt habe unten zum Weiterscrollen führen. (Display:none ist já nicht so ganz vollständig vertreten?!)
Kommt mir grade: Man könnte das doch auch beides(onmouseover und out) am NameTag festmachen? Aber so ist es ja auch okay. Poste gleich mal das fertige Ding.-
Hut sei mit dir!
so in etwa sähe dann das fertige script aus, es ist meiner meinung nach auch DOM-konform
// mouseover
function rein(text) {
document.getElementById("tool").style.visibility="visible";
document.getElementById("tool").style.position="fixed";
document.getElementById("tool").style.fontSize="9px";
document.getElementById("tool").style.top="100px";
document.getElementById("tool").style.left="0px";
document.getElementById("tool").style.overflow=hidden;
document.getElementById("tool").style.clip = "rect(0px 113px auto 0px)";
document.getElementById("tool").firstChild.nodeValue=text;
}
// mouseout
function raus() {
document.getElementById("tool").style.visibility="hidden";
}
und so der Verweis
<a onmouseover="rein('Das ist der Beschreibungstext Nr. 1');" onMouseOut="raus()" href="#">Link1</a></p>
<div id="tool"> </div>Ich spiele jetzt allerdings mit dem Gedanken, noch folgendes einzubauen:
document.getElementsByTagName("body")[0].style.backgroundImage= "url(src/bgg.gif)"Nun weiß ich aber vom letzten Script, dass es kurze Verzögerungen braucht, bis das Bild erscheint, und das beim ersten MouseOver das Hintergrundbild einfach verschwindet. Kann man da irgendwas gegen tun, bzw. gibt es Alternativlösungen? Mein Ziel ist es, dass sich ein Teil des Bildes verdunkelt, so dass man den Beschreibungstext besser lesen kann. Ich habe schon an Hintergrundfarbenwechsel gedacht, was aber wenig Sinn macht, da ich dann das Bild so groß machen muss, dass es selbst bei größter Auflösung den Rest der Hintergrundfarbe deckt (nur der Teil soll sich verdunkeln).
-
-
-
-