kostenloser Webspace werbefrei: lima-city

Onmouseover in JavaScript Problem

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   limabone

   

   limabone hat kostenlosen Webspace.

   9:14, 9.5.2009

   Hab schon die Tutorials durchgelesen, hab in diesem Forum schon ein paar Beiträge gesucht, hab aber keine Antwort auf meine Frage gefunden...
   Ich hab folgendes Problem:
   ich will einen Text oder ein Bild einfügen (klappt nat. schon!) und anschließend will ich, dass bei dem darüberfahren der Maus aun kästchen erscheint, kann man sich wie in Stämme vorstellen (hier das Bild) hab auch schon im Quelltext gestöbert und bei mir eingefügt, doch das funkt zu 99% nicht. Bei mir werden nur Tabellen angezeigt, aber wenn ich darüberfahre erschein dann nicht dieses Kästchen...
   
   EDIT: schaut wie Javascript aus, also hab ich den titel so genannt (hab aber keine Erfahrung mit Javascript!!!)
   Hier der Quelltext davon
   

   <a style="width: 52px; height: 38px; position: absolute; z-index: 2; display: block;" href="/game.php?village=3244&amp;screen=info_village&amp;id=1341" onmouseover="map_popup('Frontdorf 1 (461|605) K64', '', '', 10029, 'matze der krieger (397.444 Punkte)', 'Strat (9.429.385 Punkte)', false, false, false, false, false, false, false)" onmouseout="map_kill()"><img src="graphic/map/empty.png" style="width: 52px; height: 38px;"></a>

   
   
   Bitte um Hilfe,
   mfg Limabone
   
   Beitrag zuletzt geändert: 9.5.2009 9:18:22 von limabone

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. b***b

   9:26, 9.5.2009

   Ich hoffe dieser link hilft !!
   
   http://www.webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de
4. Autor dieses Themas

   limabone

   

   limabone hat kostenlosen Webspace.

   10:15, 9.5.2009

   sorry, ich hab das wirklich mit html oder JavaScript gemeint, der Text soll dann mit der Maus mitwandern (dh. wenn die Maus sich ein kleines Stück links bewegt, solld er Text dan auch um dieses kleine Stück nach links....)
   aber thx trotzdem!
   mfg Limabone

5. vampiresilence

   

   vampiresilence hat kostenlosen Webspace.

   19:59, 9.5.2009

   Der Quellcode den du beschrieben hast, ist soweit korrekt yedoch versteckt sich der konkrete Code hinter der Funktion "map_popup". Wenn du diese aus dem Code, oder einer verlinkten *.js-Datei extrahieren kannst, wirst du darin den benötigen Code finden. Falls diese Funktion wiederrum konfus geschrieben ist, zeig sie uns einfach, wir werden dir dann weiterhelfen.
   
   Liebe Grüße
   - VampireSilence

6. nikic

   

   nikic hat kostenlosen Webspace.

   20:16, 9.5.2009

   Also, wie vampire bereits sagte, wird beim mouseover die function map_popup aufgerufen. Das ist keine Standart-JS-Funktion, daher kannst du sie auch nicht benutzen.
   
   An dieser Stellen bieten sich dir zwei Möglichkeiten:
   1. Zu benutzt ein Framework
   2. Schreibst selbst eine Funktion.
   
   Ich will mal versuchen zu erklären wie zweiteres Funktioniert.
   
   Also, du hast erstmal hast du deinen Bereich bei dem es angezeigt werden soll:
   

   <div onmouseover="viewbox(event);" onmouseout="hidebox();">Hallo, Test!</div>

   
   Um dir ein wenig DOM zu ersparen erstellst du jetzt ein div mit dem Inhalt der beim hover angezeigt werden soll:
   

   <div id="box">Das wird dann angezeigt!</div>

   
   Dann braucht man einige Standartstyles:
   

   #box {
   display: none; /* Standartmäßig wird die Box nicht angezeigt */
   z-index: 1000; /* Wir gehen sicher, das die Box über allem anderen liegt */
   position: absolute; /* Absolute Positionierung, damit wir das div immer bei der Maus anzeigen können */
   }

   
   Jetzt kommt die eigentliche Anzeigefunktion:
   

   function viewbox(e)
   {
   
   }

   
   Der einzige Parameter ist das event, welches bentigt wird um die Mauskoordianten rauszubekommen.
   

   x = e.pageX || window.event.x;
   y = e.pageY || window.event.y;

   
   Das e.pageX ist für Firefox das window.event.x ist für den Internet Explorer.
   So, jetzt bringen wir unser div in eine Variable:
   

   box = document.getElementById("box");

   
   Jetzt ändern wir die Koordinaten des divs:
   

   box.style.left = x + "px";
   box.style.top = y + "px";

   
   Jetzt muss das div noch angezeigt werden:
   

   box.style.display = "block";

   
   Und das wars eigentlich auch schon...
   Fehlt nurnoch die Funktion zum Schließen:
   

   function hidebox()
   {
   document.getElementById("box").style.display = "none";
   }

   
   Sollte selbsterklärend sein?
   
   Alles zusammenfügen und sehen obs geht :D
7. Autor dieses Themas

   limabone

   

   limabone hat kostenlosen Webspace.

   13:59, 10.5.2009

   ^^alles schön und gut, hab es eingefügt, nacheinander versteht sich..aber wenn ich dann auf {f5} gehe, dann erscheint ein weißes Fenster ohne meinen Seitentitel und Inhalt.....
   könnte mir das bitte jemand zusammenfassen, da ich wirklich null ahnung davon hab???
   Gibt auch nen Keks von mir zur Belohnung xD
   mfg Limabone

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?