Bei Mouseover PHP datei einbinden

ChilloutFuzi · 09/08/2015, 16:04

Hey,
Ich möchte gerne wenn jemand mit der maus über ein Link fährt ein Mouseover anzeigen lassen. Aber es soll ein kleines Fenster sein. Am besten sollte Höhe und Breite fest sein. In dem Fenster soll eine andere Datei mit Parametern aufgerufen werden.

Hoffe mir kann da Jemand helfen.

sven12345 · 09/08/2015, 17:50

Adde mich mal in Skype: habdich95 und schreibe mir genau was du meinst, denke das javascript da sinnvoller sein wird als php

phlinther1 · 09/08/2015, 19:51

Kurze Ausführung, wie man sowas macht:

Du benötigst JavaScript, weil es ja bei mouseover sein soll. Du kannst den Event listener "inline" hinzufügen:

HTML Code:

<html>
  <head>
    <script>
      function mouseOverFunction() {
        window.open("http://example.com/myScript.php?var1=value",  "exampleName", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
      }
    </script>
  </head>
  <body>
    <div onMouseOver="mouseOverFunction();"></div>
  </body>
</html>

window.open öffnet ein neues Fenster, die Parameter kannst du als GET-Parameter an das PHP-Skript übergeben. Du kannst auch eine fixe Größe des neu geöffneten Fensters einstellen, schaus dir einfach mal an. Mehr zu window.open:

(Ich hab gar nichts davon getestet, es ist eher nur geraten, könnte aber funktionieren ^^)

Das wäre die einfachste Methode, deine Wünsche zu erfüllen

ChilloutFuzi · 09/08/2015, 23:03

Ich suche eine Methode das ein Popup neber der Maus aufgehen aber im Gleichen Fenster.

phlinther1 · 09/09/2015, 19:42

Ouh, sry, hab es missverstanden

Das wäre dann so möglich:

HTML Code:

<script>
    function mouseOverFunction(event) {
    
        // Mausposition ermitteln
        var mouseX = event.clientX;
        var mouseY = event.clientY;
        
        // Element selektieren
        var element = document.getElementById('window');
    
        // Element befüllen, DIESE METHODE VERWENDET JQUERY
        $('#window').load("myScript.php?var1=value", function() {
              // Element wurde befüllt -> Element zeigen und positionieren
            element.style.top = mouseY + 'px';
            element.style.left = mouseX + 'px';
            element.style.display = 'block';
        }); 
    
    }
</script>

<button onMouseOver='mouseOverFunction(event);'>Dies ist ein Button!</button>

<div id='window' style='position:absolute;width:200px;height:100px;background-color:rgb(200,0,0);' hidden></div>

Hier wird beim mouseover Event dieselbe Funktion aufgerufen, aber event wird übergeben, dadurch ermitteln wir dann die Mausposition. Wir erstellen ein "Fenster" ( hier ein dvi mit der id window) und formatieren es. Wichtig sind positon:absolute und das 'hidden', alternativ kannst du auch display:none statt 'hidden' verwenden. Dadurch wird es anfangs nicht gezeigt. Damit es einfacher geht, habe ioch zum Laden des Skripts jQuery verwendet (load function), damit es funktioniert, musst du also jQuery vor dem Skript einbinden. Der Rest sollte eigentlich klar sein

Hinweis: Das ist die einfachste Methode, wie man das machen kann. Du wirst merken, dass das Fenster IMMER rechts vom Mauszeiger geöffnet wird, auch wenn da kein Platz ist. Da könntest du dir ja selbst eine Lösung überlegen

(Tipp: viewport width und width vom geöffneten Fenster ermitteln und vergleichen und gegebenfalls das Fenster links vom Mauszeiger platzieren)

ChilloutFuzi · 09/10/2015, 15:40

Erstma Danke, ich habe es iwie nicht zum laufen gebracht. Habe es jetzt anders gelöst. Habe eine kleinen Button drunter gesetzt der ein div aufklappt und wieder zuklappt.