✔ div onmouseover - fest Positionieren

G

general_issimo

Grünschnabel
Hallo zusammen,
ich hab bei webmatze.de ein feines Tooltip-Script gefunden und auch erfolgreich in meine Seite eigebaut.
In der Seite ist eine Imagemap, die eine sensitive Fläche haben soll. Wenn die Maus über diese Fläche fährt, soll ein Infotext an einer festen Position angezeigt werden.
Der Text wird bereits angezeigt, leider wandert er mit der Maus mit.
Ich habe es noch nicht geschafft, die Position des Textes zu fixieren.
Auch nach intensiver Foren- und Googlesuche habe ich noch keine Lösung gefunden, die ordentlich funktioniert.
Hat hier vielleicht jemand einen Vorschlag für mich? Der unverbastelte Code sieht so aus:
HTML: 
<html>
<head>
<title>_</title>

<script>

wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) {
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null) {
		wmtt.style.left = (x - 40) + "px";
		wmtt.style.top 	= (y + 110) + "px";
	}
}

function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}

function hideWMTT() {
	wmtt.style.display = "none";
}


</script>

<style type="text/css">
.tooltip {
	position: absolute;
	<!--position: relative;-->
	left: 0;
	top: 10;
	display: none;
	background-color: #6c8074;
	-moz-opacity: 0.4;
	filter: alpha(Opacity=40);
}
</style>


</head>

<div class="tooltip" id="1">
	Dieser Text soll bei Mouseover eine feste Position bekommen, und nicht mit der Maus mitwandern
</div>


<body text="#000000" bgcolor="#505d56" link="#FF0000" alink="#FF0000" vlink="#FF0000" <!--onLoad="window.resizeTo(660,650)"-->>
<map name="map">

     <area shape=rect coords="32,259,62,290" href="#" onMouseOver="showWMTT('1')" onMouseOut="hideWMTT()">
     <area shape=rect coords="32,299,62,329" href="mailto:webmaster@_.de">


</map>
<p style="margin-top:-23px;margin-left:-10px;margin-right:-9px"><img src="mapimg.jpg" width="600" height="400" border="0" alt="" usemap="#map"></p>

</body>
</html>

Siehe auch Anhang. Vielen Dank für eure Ideen!
#gi
 

Anhänge

Dann nimm mal den rotmarkierten Teil aus dem Scriptcode raus:

Code: 
wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) {
        x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
        y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
        if (wmtt != null) {
                wmtt.style.left = (x - 40) + "px";
                wmtt.style.top  = (y + 110) + "px";
        }
}

function showWMTT(id) {
        wmtt = document.getElementById(id);
        wmtt.style.display = "block"
}

function hideWMTT() {
        wmtt.style.display = "none";
}
 
... so einfach kann es gehen.

Ich hab schon mal versucht, das mit <!-- --> auszukommentieren.
Das gilt scheinbar nicht :(

Besten Dank für die schnelle Hilfe!
 
Scriptzeilen werden mit zwei vorangestellten Slashes // auskommentiert (deaktiviert).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück