Gegen Bilderklau - Das Original

Registrierung Mitgliederliste Teammitglieder Suche Häufig gestellte Fragen Statistik Chat Karte Zur Startseite

Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Homepagehilfe - Archiv » tooltip erstellen » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | Thema zu Favoriten hinzufügen
Zum Ende der Seite springen tooltip erstellen
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
loremipsum
Mitglied


Dabei seit: 03.02.2013
Beiträge: 2

tooltip erstellen Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

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

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von loremipsum: 03.02.2013 18:05.

03.02.2013 18:03 loremipsum ist offline E-Mail an loremipsum senden Beiträge von loremipsum suchen Nehmen Sie loremipsum in Ihre Freundesliste auf
Nivea Nivea ist weiblich
Mitglied


images/avatars/avatar-53389.png

Dabei seit: 27.07.2011
Beiträge: 51
Herkunft: Schweiz

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

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') {
        = (e.pageX e.pageX window.event.x) + wmtt.offsetParent.scrollLeft wmtt.offsetParent.offsetLeft;
        = (e.pageY e.pageY window.event.y) + wmtt.offsetParent.scrollTop wmtt.offsetParent.offsetTop;
        wmtt.style.left = (20) + "px";
        wmtt.style.top     = (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.
04.02.2013 12:43 Nivea ist offline E-Mail an Nivea senden Homepage von Nivea Beiträge von Nivea suchen Nehmen Sie Nivea in Ihre Freundesliste auf
Oli
Server-Administrator


Dabei seit: 13.06.2010
Beiträge: 1.540

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

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
04.02.2013 17:04 Oli ist offline Beiträge von Oli suchen Nehmen Sie Oli in Ihre Freundesliste auf
loremipsum
Mitglied


Dabei seit: 03.02.2013
Beiträge: 2

Themenstarter Thema begonnen von loremipsum
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

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!

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von loremipsum: 04.02.2013 21:17.

04.02.2013 21:04 loremipsum ist offline E-Mail an loremipsum senden Beiträge von loremipsum suchen Nehmen Sie loremipsum in Ihre Freundesliste auf
Baumstruktur | Brettstruktur
Gehe zu:
Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Homepagehilfe - Archiv » tooltip erstellen

Impressum

Forensoftware: Burning Board, entwickelt von WoltLab GmbH