[Mondragor]

Hallo Leute,

Ich möchte zu einer Liste folgende Option hinzufügen:
Wenn ich mit der Maus über eine Zeile fahre, soll sich ein bestimmtes Popup öffnen, das Details zum Posten anzeigt.
Wenn ich mit der Maus wieder davon runter gehe, soll sich dieses Popup wieder schließen.
Angenehm wäre auch, wenn das Poup möglichst wenig an menüzeilen und so hätte, möglichst also ein Fenster ohne Adresszeile, ohne Menüpunkte und was man sonst noch so weglassen kann.

Wäre schön, wenn mir jemand helfen kann.

Grüße,

Mondragor

[daarg]

Ich würde diese Idee (Popup) begraben:
Erstens haben die meisten Browser einen Popupblocker der das Öffnen verhindern wird/würde.
Zweitens verliert der Betrachter das Browserfenster (Du müsstest ja den Focus auf das Popup legen)

Bessere Ansatz:
Modales Fenster mit jQuery (oder so).
Schau mal http://www.blogrammi...enster-plugins/

// daarg

[Mondragor]

Kann man das denn auch so programmieren, dass es onmouseout auch wieder zu geht?
Ich stelle mir das so vor wie ne preview-Funktion, die man ja mit einem Bild hinterlegen kann, für bestimmte Links.
Gibt es alternativ eine Möglichkeit, die aktuelle Detailseite vor dem "Preview" in eine art Bild umzuwandeln und dieses anzeigen zu lassen?
Grüße,
Mondragor

[Stefan_der_held]

och popup ist doch machbar

folgenden JS (ist für insgesammt 6 Einträge "vorbereitet" mehr oder weniger durch anpassen der Werte möglich

<script type="text/javascript"> 
            function anzeigen(das){ 
            for(i=1;i<=6;i++) {             
            document.getElementById(i).style.display='none';} 
             
               document.getElementById(das).style.display='block';} 
</script>

dann die Inhalte wie folgt:

<a href="#" onclick="anzeigen('2')">INHALT DES KLICK ODER HOVER BEREICHS</a>
<div id="1" style="INFOS WAS WO WIE">INHALT</div>

wenn du stattdessen ein oonmousehover machen willst einfach im zweiten Codeschnippsel die Option ändern

hier kannst du sehen wie es funktioniert:
http://adlung-galaba...mgestaltung.php

die Bilderreihen sind (falls anklickbar) auf diese Art und Weise angezeigt

Zitat (Mondragor: 22. Februar 2012 - 11:38)

Gibt es alternativ eine Möglichkeit, die aktuelle Detailseite vor dem "Preview" in eine art Bild umzuwandeln und dieses anzeigen zu lassen?
Grüße,
Mondragor

bei onmousehover wird dies nur angezeigt solange du da drauf bist. onclick würde es bis zum nächsten Klick anzeigen.

empfehle aber ehr onclick sodass der besucher auch vernünftig lesen kann.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 22. Februar 2012 - 11:45

[FenKeN]

Muss es denn zwingend Javascript sein?
Das ganze ist nämlich auch mit CSS Lösbar..

span.hover-box {
            border:0 none;
            color: #000;
            display: none;
            position: absolute;
            bottom:7%;
            padding-top:100px;
            padding-left:30px;
            padding-right:45px;
            text-decoration: none;
            height:500px;
            width:326px;
        }

a:hover span.hover-box {
            display: block;
        }

aufbauen tust du das dann so:

<a href="#">
                <span class="hover-box"> <!-- hier kommt der Inhalt der mouseover box -->
                    pipapo
                </span> <!-- hier ist der Inhalt zuende -->
                Hier schreibst du dann die Abteilung oder sonstiges rein..
            </a>

Sobald du nun mit der Maus drüber fährst, erscheint eine kleine Box ohne Border, kann man natürlich alles einstellen,
In der Box steht dann der Inhalt drin, den du angegeben hast.
Sobald du mit der Maus rausfährst, verschwindet die Box wieder.

Das ganze ist halt noch <a href=""> also ein Link, über den du drüber fährst.
Kannst du natürlich auch mit <li> etc machen.

Dafür braucht man nicht umbedingt Javascript rausholen

Du kannst dem <span> auch einen hintergrund mittels CSS geben, so erscheint dann dein Bild, falls du das willst usw.

CSS <3

Dieser Beitrag wurde von CryztaN bearbeitet: 22. Februar 2012 - 12:15

[Mondragor]

Das Ding ist, dass der Inhalt, der dann angezeigt werden soll, eine html-seite ist, also muss interpretiert werden und kann daher nicht blanco text sein.

[Ludacris]

dann leg einen iframe an und blende den aus / ein

[Stefan_der_held]

Zitat (Ludacris: 22. Februar 2012 - 14:05)

dann leg einen iframe an und blende den aus / ein

man bist du per***s iFrame

[FenKeN]

Du kannst statt span auch ne div nehmen und dort weiteren htmlcode reinpopeln?
Müsste bei ner span doch a gehen? Grad 0 chance zu testen - handy..