Link im Popup-Fenster öffnen

warrioroflight schrieb am 17.01.2012 um 13:22 Uhr

Hallo an alle!

ich versuche mich an einer Homepage mit dem Web Designer...

nun habe ich ein bild / text... wenn man auf den klickt soll ein popup fenster auf gehen, ca 500x600px, mit einer info seite über dieses/n bild/text... wie bewerkstellige ich das??? ich möchte also nciht diese "highlight" funktion des WD sondern ein echtes popup fenster... wo erstelle ich das am besten?? habe schon etwas über popup ebenen gelesen und so sachen, bin aber leider immernoch nicht dahinter gestiegen...

würde mich sehr über schnelle hilfe freuen! DANKE! :-)

Kommentare

BeRo schrieb am 17.01.2012 um 14:38 Uhr

[...] ich möchte also nciht diese "highlight" funktion des WD sondern ein echtes popup fenster. [...]

Das ist ganz einfach, wenn man weiß wie es geht...

Also:

  1. Nach einem Rechtsklick auf die MouseOff Ebene legst Du eine neue Ebene an.
  2. Öffne die neue Ebene im Editor mit einem Klick auf das "S" (Solo) Symbol rechts neben der Ebene.
  3. Erstelle auf der Ebene die gewünschte Info (Text-, Grafik-, Video-, etc.) und positioniere alles so, wie Du es später als Popup sehen willst.


     
  4. Auf der Hauptseite weist Du dem Bild, das als Auslöser für deine Popup Ebene dienen soll, einen passenden Link zu



     
  5. Wenn Du möchtest, kannst Du jetzt noch einen Popup-Effekt wählen und der Popup Ebene zuweisen.
    Wählbar ist  z. B. das Hereingleiten der Ebene oder das Einblenden, quasi aus dem Nichts, usw.



     
  6. Wenn Du alles richtig gemacht hast, kann das online (und in der Vorschau) nach einem Klick auf das verlinkte Bild dann so aussehen



     
  7. Fertig.

Na, dann viel Spaß beim jetzt noch besseren Website Design

Zuletzt geändert von BeRo am 17.01.2012, 14:38, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

warrioroflight schrieb am 17.01.2012 um 14:49 Uhr

hey BeRo!

Danke für dein mühe, aber das ist nicht ganz das was ich gemeint habe....

habe mal endlich ein beispiel gefunden... geh mal auf diese seite: http://www.geissgmbh.de/haustueren_weru.php#

dort klick mal bitte auf das bild mit der tür... und da öffnet sich ein popup fenster... also ein ganz neues browser fenster... sowas möchte ich haben :-)

BeRo schrieb am 17.01.2012 um 16:00 Uhr

[...] da öffnet sich ein popup fenster... also ein ganz neues browser fenster... sowas möchte ich haben :-) [...]

Kein Problem.

Dazu kannst Du meine Anleitung von vorhin nahezu komplett übernehmen. Nur bei der Verlinkung wählst Du anstelle der Popoup Ebene "Link öffnen in:" und stellst dort "Neues Fenster (_blank)" ein (s. Screenshot)

Und, wenn das sich das neue Fenster in einer bestimmten Größe öffnen soll, findest Du hier einen Thread, in dem ich dazu schon mal eine Anleitung gepostet hatte.

Viel Erfolg

Zuletzt geändert von BeRo am 17.01.2012, 16:00, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

BeRo schrieb am 18.01.2012 um 01:08 Uhr

@ warrioroflight

Danke für Deine PN und für das Vertrauen.

Im Interesse der Community  möchte ich Deine Fragen gerne hier, im Forum beantworten.
Imho haben nur so auch andere User eine Chance, eigene Probleme zu lösen, die eventuell ähnlich gelagert sind.

Du schreibst u. a:

[...] ... aber irgendwie komme ich grad noch nicht so ganz dahinter [...]

Machen wir das Ganze also mal step by step...

  1. Du beginnst damit, dass Du Dir 2 Bilder zurechtlegst, die später das anzuklickende Bild- und das aufpoppende Bild im neuen Fenster ergeben.
    Das anzuklickende Bild kann klein sein, z. B. 135 x 135 px. Das aufpoppende Bild muss größer sein, in unserem Beispiel etwa 600 x 800 px.
    Nennen wir Bild1 "villa01.jpg" (das kleine) und Bild2 "villa02.jpg" (das große)
  2. Im WD Editor öffnest Du die Seite, die Bild1 enthalten soll und ziehst an der gewünschten Position einen Rahmen, der etwa die Größe des Bildes "Bild1" hat, also etwa 135 x 135 px



     
  3. Dem Platzhalter (Rahmen) muss nun über die Link Funktion der ScriptCode zugewiesen werden, der dafür sorgt, dass nach einem Klick auf das Bild das neue Fenster geöffnet wird.
    Den passenden Code siehst Du hier:

    {a href="index_htm_files/villa02.jpg" target="popup" onClick="window.open('','popup','scrollbars=0,resizable=1,width=620,height=805,menubar=0,toolbar=0,location=0,directories=0,status=0,top=100,left=100');">{img src="index_htm_files/villa01.jpg" width="135" height="135" border="2"  style="border-color:#FC0">{/a>

    Achtung! Die im Code aufgeführten, geschweiften Klammern müssen gegen spitze Klammern getauscht werden.

    Wenn Du den Code kopierst, achte darauf, dass keine Zeilenumbrüche eingefügt werden. Der gesamte Code gehört in eine Zeile!




    Hier siehst Du den ScriptCode im Original:

     
  4. Damit die beiden Bilder beim späteren Export des Projekts- und auch online korrekt angezeigt werden, müssen sie jetzt in ein Hilfsverzeichnis gelegt werden, das für unser Projekt zwingend "popup_Web_files" heißen muss.
    Für unser Beispiel hat das Projekt von mir den Namen "popup" bekommen. Die Projektdatei heißt nach dem Abspeichern also "popup.web"
    Das Hilfsverzeichnis muss da angelegt werden, wo auch die Projektdatei gespeichert wird.
    In unserem Beispiel habe ich dafür den Desktop gewählt.
  5. Jetzt kann das Projekt (auf den Desktop) exportiert werden. Der WD kopiert dabei die beiden Bilder aus dem Hilfsverzeichnis automatisch in das Verzeichnis "index_htm_files", das später beim Veröffentlichen auf Deinem Webspace landet.
    Da die Links zu den Bildern im Script Code auf dieses Verzeichnis zeigen, funktioniert nach einem Doppelklick auf die exportierte "index.htm" alles wie gewünscht.
    Natürlich funktioniert das nach dem Export auch in der Vorschau.



     
  6. Das war's

Wenn Du mit den Im ScriptCode sichtbaren Parametern experimentieren willst, findest Du im WWW reichlich Lesestoff dazu. Hier wird das Thema z. B. schon recht ausführlich behandelt.

Nun denn, viel Erfolg. Und wenn immer noch Fragen offen geblieben sind... nur her damit
 

Zuletzt geändert von BeRo am 18.01.2012, 01:13, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

warrioroflight schrieb am 18.01.2012 um 10:39 Uhr

So...

nach nun ca 5 stunden rumprobieren und 10 Kaffee habe ich es endlich hinbekommen!!! BeRo, vielen lieben Dank!!! werde mal wenn die Homepage fertig ist dir den Link geben, dann kannst du mein Werk mal "bewerten" :-)

Vielen lieben Dank nochmal!

 

LG