javascript mouseoverpopup

[HighTec]

Ersteinmal Sorry für den unübersichtlichen Titel wusste nicht wie ich es sonst beschreiben könnte.

Also um mein Problem zu schildern:

Ich habe nun auf vielen Seiten mal gesehen, dass es die Möglichkeit gibt bei einem Mouseover ein kleines fenster neben der maus erscheinen zu lassen (Wie bei normalem HTML der Text wenn man die Maus auf einem Element hat). Nur auf den Seiten waren diese "Erklärungsfenster" in einem Design aufgebaut. Ich komme gerade nicht auf den Namen und habe leider auch nichts bei Google oder in der Suchfunktion gefunden.
Hoffe ich habe es gut genug beschrieben.

Würde mich über einen kleinen Denkanstoß oder Link oder ähnlichem freuen.

Greetz

HighTec

 

[krizzelfix]

Link
Da gibts das als fertige JS Klasse, echt super & einfach mit zuarbeiten.

 

[Enigma]

Was auch ziemlich cool ist: Thickbox

 

[HighTec]

@tewes

Das geht schon in die richtung was ich meine aber ich hatee da welche gesehen die sind fast aufgebaut wie eine html page mit selbstgezeichnetem ramen und anderer schriftfarbe und so weiter. Mich würde halt interessieren wie der Code davon aussieht. Kann mir auch irgendwie net vorstellen, dass man da so viele Dateien für braucht.

Habe jetzt ein Beispiel gefunden:

http://worldofwarcraft.guilding.net/index.php?mode=groupmarket

Da kann man das sehr schön sehen was ich meine wenn man mit der Maus auf die Liste fährt

 

[krizzelfix]

Wo hast du das denn gesehen?
Meinst du in Shops wo dann das Bild in groß dargestellt wird und noch weitere Infromationen Angezeigt werden?
Das wäre auch leicht zu realisieren. Da müsstest du einen Container mit dem Inhalt rein auf display: none und position: absolute setzten und dann beim Mouseover display: block und die Positionen von der Maus holen. Schon hast da einen Container an der Maus kleben

Grüße

tewes

 

[HighTec]

http://worldofwarcraft.guilding.net/index.php?mode=groupmarket

Da hab ich das gesehen.
Kannst du mir irgendwie ein Beispiel geben?
Stehe Momentan voll auf dem Schlauch
es sieht so aus als würde dort eine weiter php/html datei neben angezeigt werden

 

[noreal]

Das ist ganz Simples CSS.

In den TR folgendes Einfügen:

<tr bgcolor=#FAF6D4 onMouseover="this.bgColor='#DBF8A4'" onMouseout="this.bgColor='#FAF6D4'">

Das ist rauskopiert von deinem WOW Beispiel.

//EDIT dann wohl falsch verstanden, was genau gemeinst ist.

 

[HighTec]

In dem WOW Beispiel erscheint aber ein Fenster mit Hintergrund (der definitiv als Bild Datei vorliegt) mit einem Text drüber

 

[krizzelfix]

@noreal: HighTec meint die Box die erscheint wenn man über die Grafik des Users geht.

@HighTec: Du musst dier einen Container erstellen in den du die Daten reinschreibst:

/*css*/ 
.infos {
   position: absolute; 
   display: none;
   background-image: url('../someimages.gif');
   background-repeat: no-repeat;
.....
}

<?php
$daten = array(); // Array mit den Daten die Ausgegeben werden Sollen
forech($daten as $text)
{
   echo "<div class=\"info\">".$text."</div>";
}
?>

//HTML

<img src="ein bild" onmouseover="showContainer();" onmouseout="HideContainer();" />

Jetzt musst du in den Javascript Funktionen den Algorithmus schreiben der den Container zeigt und versteckt.

 

[HighTec]

Ja und genau da weiss ich nicht wie ich das Verwirklichen kann. Sorry aber ich bin ein javascript newbie

 

[krizzelfix]

function showContainer(ID) {
   div =  document.getElementByID(ID);
   div.style.display = 'block';
   div.style.top = window.event.screenX;
   div.style.left = window.event.screenY; 
}
function hideContainer(ID) {
  div =  document.getElementByID(ID);
  div.style.display = 'none';
}

Habe das jetzt nicht getest. So in entwa sollte es aber funktionieren.

 

[HighTec]

Ok ich werds mal ausprobieren.
Vielen Dank soweit.