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
Seite 1 von 1
onmouseover - popup - onmouseout close
Anzeige
#2
geschrieben 22. Februar 2012 - 10:32
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
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
as wolves among sheep we have wandered [bathory, dis irae]
#3
geschrieben 22. Februar 2012 - 11:38
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
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
#4
geschrieben 22. Februar 2012 - 11:47
och popup ist doch machbar
folgenden JS (ist für insgesammt 6 Einträge "vorbereitet" mehr oder weniger durch anpassen der Werte möglich
dann die Inhalte wie folgt:
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
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.
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
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
#5
geschrieben 22. Februar 2012 - 12:13
Muss es denn zwingend Javascript sein?
Das ganze ist nämlich auch mit CSS Lösbar..
aufbauen tust du das dann so:
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
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
#6
geschrieben 22. Februar 2012 - 13:56
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.
#8
geschrieben 22. Februar 2012 - 15:15
#9
geschrieben 22. Februar 2012 - 15:37
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..
Müsste bei ner span doch a gehen? Grad 0 chance zu testen - handy..
- ← Dringende Frage zu Dreamweaver
- Skript/Web-Programmierung
- Webseite: Navigationsleiste vom Inhalt abkoppeln →
Thema verteilen:
Seite 1 von 1