Markus: Pop-Up Fenster mit Bild

SELF-Forum

Pop-Up Fenster mit Bild

Markus
– Informationen zu den Bewertungsregeln

Hi,

ich habe folgende frage:

Wie erstelle ich ein Pop-up Fenster, hinter einem link, mit der größe 400pixel breit und 300pixel hoch, indem ich ein Bild platziere?
Ich habe mir zwar schon den Quelcode von SELFHTML durchgelesen, komme jedoch nicht ganz damit klar. Wie muss ich das Bild plazieren, bzw. wo im Quelcode, oder geht das garnicht?

Wäre super, wenn mir jemand den passenden Quelcode geben könnte,und mit vielleicht auch ganz kurz erklären könnte mit dem ich einfach das Bild paltzieren kann!

MfG
Markus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Pop-Up Fenster mit Bild

    molily
    – Informationen zu den Bewertungsregeln

    Hallo, Markus.

    <menschelei>Opera, mein Schatz, wieso bist du entzürnt! Innerhalb einer Woche hast du mir schon dreimal ein Posting verratzt! Was musst du auch immer crashen, wenn ich MSIE oder NS4 schließe! Ich schwor dir, dich nie zu betrügen; deine krankhafte Eifersucht hindert mich doch, das Evangelium zu verkündigen!</menschelei>

    Wie erstelle ich ein Pop-up Fenster, hinter einem link, mit der größe 400pixel breit und 300pixel hoch, indem ich ein Bild platziere?

    Indem du Selfhtml http://selfhtml.teamone.de/javascript/objekte/window.htm und das Popup-Howto http://home.t-online.de/home/dj5nu/js-popup.html liest und es dir selbst machst.

    Ich habe mir zwar schon den Quelcode von SELFHTML durchgelesen, komme jedoch nicht ganz damit klar.

    Schau dir die Beispiele an. Kopiere und ändere einiges ab, probiere aus und mache Fehler, behebe sie, lies noch einmal nach, verzweifle und dann frage im Selfforum. *fg*

    Wie muss ich das Bild plazieren, bzw. wo im Quelcode, oder geht das garnicht?

    Einfacherweise könnte man im Popup direkt das Bild öffnen, dann kann man jedoch nicht die Ränder zwischen Fensterrahmen und Dokumentinhalt bestimmten, deshalb schlage ich vor, im Popup-Fenster eine komplette HMTL-Datei zu öffnen.

    In der Seite, die das Popup aufrufen soll, fügst du folgenden Link ein:
    <a href="[Bilddateiname]" onclick="window.open('seite_mit_bild.html','popup','width=400,height=300,resizable=yes'); return false">Linktext</a>
    (Natürlich in einem p-Element oder einer Liste oder...)

    (Im Übrigen könnte man auch <a href="seite_mit_bild.html" ...> verwenden, wie man es mag.)

    In die Datei seite_mit_bild.html (der Dateiname ist egal, den kannst du beliebig wählen, solange du ihn in obigem Link anpasst):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>[Website-Titel] - Bildanzeige</title>
    <style type="text/css" media="screen" title="Autorenstylesheet">
    html,body,p {margin:0; padding:0;}
    </style>
    </head>
    <body>

    <p><a href="javascript:window.close()"><img src="..." alt="..." width="..." height="..." /></a></p>
    <noscript><p><a href="...">Zurück zu ... [Galerie?]</a></p></noscript>

    </body>
    </html>

    Mit CSS werden die Seitenränder auf Null gesetzt. Diese kannst du natürlich ändern (z.B. auf body {margin:10px;} setzen) und musst dementsprechend die Größe des Popup-Fensters im obigen Aufruflink vergrößern.
    Für NS4 ist vielleicht zusätzlich HTML-Attribute für die Ränder http://selfhtml.teamone.de/html/dateiweit/seitenraender.htm interessant, dann musst du jedoch eine Transitional-DTD setzen. Oder du verwendest folgenden Workaround: http://selfhtml.teamone.de/navigation/faq.htm#kein_seitenrand.

    Wenn du mehrere Bilder in Popup-Fensters öffnen willst solltest du dir Galerien dafür automatisch mit Scripten generieren lassen. Über diese Problematik schreibe ich momentan einen Artikel, welcher zumindest das Problem der an das Bild angepassten Popups löst. Im de.comp.lang.php-FAQ http://www.dclp-faq.de/q/q-grafik-verkleinern.html gibt es Links zu Scripten, welche Thumbnails automatisch erstellen und cachen, diese kannst du dann modifizieren, sodass die Bilder in Popups geöffnet werden.
    Die JavaScript-Funktion, welche das Popup-Fenster öffnet, könntest du auch auslagern, das Wie steht im obigen Popup-Howto.

    Wäre super, wenn mir jemand den passenden Quelcode geben könnte,und mit vielleicht auch ganz kurz erklären könnte mit dem ich einfach das Bild paltzieren kann!

    Wir haben keinen Quellcode zu verschenken. ;)

    Grüße,
    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln