Gegen Bilderklau - Das Original | Druckvorschau: tooltip erstellen

Geschrieben von loremipsum am 03.02.2013 um 18:03:

tooltip erstellen

Hey,

ich wollte für ein Kunstprojekt eine Webseite erstellen und mithilfe von Javascript tooltips einblenden sobald man über gewisse links fährt.
http://inszenierung.bplaced.net/

Mein Problem ist, dass ich bei dem Link "gubergren" (rot) das tooltip nicht eingeblendet wird.
Ich habe leider auch gar keine Ahnung von Javascript und kann mir von daher auch wenig helfen.
Am Ende sollte bei jedem Link etwas anderes angezeigt werden.

Der JS Teil:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
	if (wmtt != null && wmtt.style.display == 'block') {
		x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
		y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}
function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block";
}
function hideWMTT() {
	wmtt.style.display = "none";
}

Der HTML-Teil:

code:
1: 2:	<div id="1" class="tooltip">Dies ist unser erster Tooltip</div> <a href="#" onmouseover="showWMTT('1')" onmouseout="hideWMTT()"><div class="bild1"></div></a>

Den Code habe ich aus einem Tutorial. (http://webmatze.de/wirklich-einfache-javascript-tooltips/)
Würde mich wirklich über Hilfe freuen!

Liebe Grüße

Geschrieben von Nivea am 04.02.2013 um 12:43:

Hey, hab mir die Seite angesehen.
Dein JavaScript-Block sieht so aus:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

<script type="text/javascript">
<--
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
    if (wmtt != null && wmtt.style.display == 'block') {
        x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
        y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
        wmtt.style.left = (x + 20) + "px";
        wmtt.style.top     = (y + 20) + "px";
    }
}
function showWMTT(id) {
    wmtt = document.getElementById(1);
    wmtt.style.display = "block";
}
function hideWMTT() {
    wmtt.style.display = "none";
}
-->
</script>

Die <-- bzw --> stehen für Kommentar, das heisst, du hast den gesamten Teil auskommentiert, das heisst, es wird nicht als code angesehen (sondern als Kommentar) und kann daher nicht ausgeführt werden. Ist das absicht?
Ansonsten einfach die zwei pfeile löschen.

Geschrieben von Oli am 04.02.2013 um 17:04:

Hi,

Zitat:

Original von Nivea
Die <-- bzw --> stehen für Kommentar, das heisst, du hast den gesamten Teil auskommentiert, das heisst, es wird nicht als code angesehen (sondern als Kommentar) und kann daher nicht ausgeführt werden. Ist das absicht?
Ansonsten einfach die zwei pfeile löschen.

das ist eine Technik, um den Javascript Code vor seeeehr alten Browsern zu verstecken, die das <script>-Tag nicht kennen und den Code als Seiteninhalt darstellen würden. In Javascript stellt diese Schreibweise keinen Kommentar dar und wird von den Browsern zu oben genanntem Zweck tolleriert.

Allerdings fehlt hier das ! am Anfang: <!--, weshalb die Angabe falsch ist - die Browser werden also voraussichtlich den ganzen Block wegen Syntax Error ignorieren.

Mir ist kein heutiger Browser bekannt, der diese Schreibweise benötigen würde. Falls solche Browser noch im Umlauf sind, dann wird dort vermutlich sowieso nichts wie erwartet funktionieren, da der Browser so alt wäre, dass er die aktuellen CSS-Anweisungen nicht versteht. Man könnte die HTML-Kommentare um den Code also auch einfach weglassen.

LG,
Oli

Geschrieben von loremipsum am 04.02.2013 um 21:04:

Vielen Dank!! (:
Tooltips werden wie gewünscht angezeigt, werden allerdings von anderen divs überlagert, wüsse da jemand eine Lösung?

Liebe Grüße

*edit*

Problem gelöst! (:
Hab die Tooltip-Div ans ende des Scriptes gepackt

Nochmal Danke für die Hilfe!