Bilder Popup...

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

ich habe mich hier mal wieder ein bisschen umgesehen und habe leider nicht das richtige gefunden.

Ich habe folgendes vor, ich möchte ein paar Bilder auf meine Seite stellen. Ein bisschen text drum rum… Aber halt nur kleine Vorschauen der Bilder.

Das Bild soll sich vergrößern, wenn man mit der Maus drüber fährt. So ein kleiner Popup wie eine Sprechblase oder sowas.

Geht das ohne weiteres und wenn ja wie?

Hoffe ihr könnt mir helfen.

Bis denne

Patrick

Hallo nochmal,

ich habe mal weiter gegoogelt und das hier gefunden:

ThumbsUp

Dort gibt es ja genau das was ich will. Nun habe ich festgestellt, dass mein Browser den Popup blockt…!!!

Wie kann ich das denn von vornherein vermeiden?

2

Gar nicht?
Popups werden nur dann akzeptiert, wenn der User beim Betätigen einer Funktion/Links vom Browser erkannt wird.
Und das hat einen großen Grund:
Keiner mag Popups, die ein neues Fenster aufmachen!
Was ich sehr mag ist: CSS-Popup.


// BITTE KEINE DOPPELPOSTS

3

Du kannst ein Bild auf deine Seite stellen. Ganz normal mit wichtig ist nur das das Bild einen Namen bekommt. <img= … name=„image1“ …
dein kleines Bildchen versiehst Du dann mit einem mouseover-Befehl. Dieser kann dann dein „image1“ austauschen gegen eine andere Datei.

4

Hallo,

also erstmal muss ich ja sagen, dass ich oben ja ganz deutlich geschrieben habe, dass kein neues Fenster geöffnet werden soll, also kein neuer Tab, sondern nur eine kleine „Sprechblase“, die das Bild in etwas größer darstellt. Außerdem soll es ja nur ein Mouseovereffekt sein, also die Sprechblase soll wieder verschwinden, wenn man mit der Maus nicht mehr über dem Bild ist.

Den letzten Tipp, habe ich nicht ganz verstanden.

Könntest du nochmal weiter ausführen?

Grüße

Patrick

5

[quote=„King_Joker, post: 113051“]
Hallo,

Den letzten Tipp, habe ich nicht ganz verstanden.

guckst Du Hausbau bei Handwerk.

Dort sind kleine Bilder verschiedener Gewerke wenn Du drueber streifst aendert sich das Infofeld in der Mitte. Wenn Du ein kleines Bild ohne Breite und Hoehe platzierst kannst Du es mit mouseover gegen ein grosses austauschen. Das kann das Bild sein welches Du gerade ueberstreichst oder ein woanders platziertes.

6

Nun habe ich festgestellt, dass mein Browser den Popup blockt…!!!

Es blockt die ersten 2 Beispiel Popups.

Außerdem soll es ja nur ein Mouseovereffekt sein, also die Sprechblase soll wieder verschwinden, wenn man mit der Maus nicht mehr über dem Bild ist.

Auch das geht mithilfe von CSS:hover.

<style type="text/css">

#thumb {
 height: HÖHE;
 width: BREITE;
 background: url(kleinesbild.gif);
}

.popup {
 height: HÖHE;
 width: BREITE;
 position: absolute;
 display: none;
}

#thumb:hover .popup{
 left: Von Links die Position;
 top: Von Oben die Position;
 background: url(großesbild.gif);
}
</style>
<div id="thumb">
 <div class="popup"></div>
</div>

Gruß, Eugen alias KING-E2daZ.

//MEIN 300. BEITRAG!

7 
<img src="bild.jpg" alt="" style="height:100px; width:100px;" onmouseover="this.style.width = '150px; this.style.height = '150px''" onmouseout="this.style.width = '100px; this.style.height = '100px'">

[COLOR=„Red“]Mod-Edit: Code-Tags hinzugefügt. (gutschiguh)

8

Ohhh Mann was denn nun das CSS von Eugen oder den Code von Monster…

Schreibt doch bitte was dazu, wenn ihr einen Code postet!!

9

Probier doch beides aus und entscheide dich für etwas besseres.

10

@King_Joker: Die erste Version von 3UGENE ist die css-variante und meine ist die javascript-variante… Ich dachte du hättest sowas schonmal gesehen…

11

Ja monster ich habe sowas schon mal gesehen :???:

Ich habe mich einfach nur gefragt, welche die bessere Variante ist.

Ich werde es ausprobieren…

Danke

12

Sie erfüllen beide den Zweck, nur die javascript-Variante greift nicht, wenn der User javascript ausgeschaltet hat… Das ist in einem privaten Haushalt aber so gut wie nie der Fall…