Leicht transparenter Hintergrund bei... - Druckversion +- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de) +-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62) +--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86) +--- Thema: Leicht transparenter Hintergrund bei... (/showthread.php?tid=23414) |
Leicht transparenter Hintergrund bei... - lebus - 12.08.2007 Hallo Miteinander, bin nun schon länger im Netz auf der Suche, habe das Richtige aber noch nicht gefunden. Möchte den Effekt auf meiner Seite einbauen, dass nach Anklicken des Vorschaubildes, eine Großansicht geöffnet wird, die einen grauen leicht transparenten Hintergund hat und sich sozusagen optisch über die Basisseite legt. Begriffe wie Overlay oder teiltransparente PNG Grafik sind mir auf der Suche begegnet, aber so das ausschlagebende "Ja so geht es" habe ich noch nicht gefunden. Ich gebe hier mal einen Link anbei, wie ich mir das Ganze so vorstelle. Man beachte das sich öffnende Fenster nach Anklicken "Vollbild", so hätte ich es schon gerne. Ideen?? Liebe Grüße Ina Leicht transparenter Hintergrund bei... - Helmut - 12.08.2007 Hi, Du suchst sicher sowas wie eine Lightbox Cu Helmut Leicht transparenter Hintergrund bei... - lebus - 12.08.2007 Vielen Dank Helmut, hatte ich auch gefunden, Grey Box, Light Box, Thick Box, aber ich habe da so meine Bedenken, dass klein Ina das alles so reibungslos in die HP integriert bekommt. Gibt es da nicht eine kleine Deutschsprachige Hilfe. "Wie mache ich was". Liebe Grüße Ina Leicht transparenter Hintergrund bei... - Helmut - 12.08.2007 ... Zitat:aber ich habe da so meine Bedenken, dass klein Ina dasaber aber, bei Dir steht "Profi Member" unter dem Benutzername, das heisst Du brauchst nur einen Fingerschnipp mit links und das Ding ist gegessen... Spass beiseite, der Einbau ist nicht das Problem. 1. In den Head Bereich der Seite kommt das Code: <script type="text/javascript" src="js/prototype.js"></script> und das Code: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> Die URL's natürlich angepasst auf deine Webseite, alo z.B. anstatt js/prototype.js viell. so inas_dateien/prototype.js Dann schaust Du in die lightbox.css und prüfst ob die Dateien prevlabel.gif und nextlabel.gif Angaben passen, selbiges nochmal für die Dateien loading.gif und closelabel.gif in der lightbox.js. Die Bilder bindest Du dann so ein: Wenn ein Einzelbild angezeigt wrden soll Code: <a href="images/bild1.jpg" rel="[B]lightbox[/B]"><img src="vorschaubild1.jpg" width="xyz" height="zyx" alt=""></a> Für ein Set von Bildern lightbox[blumen] ist der Name des Bildersets, also z.B. blumen, kinder, zeichnungen Code: <a href="images/bild1.jpg" rel="[B]lightbox[blumen][/B]"><img src="vorschaubild1.jpg" width="xyz" height="zyx" alt=""></a> Cu Helmut Leicht transparenter Hintergrund bei... - prm - 12.08.2007 Wäre das auch eine Alternative, oder wäre dir das vom Effekt her zu "einfach"? http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ Leicht transparenter Hintergrund bei... - lebus - 12.08.2007 Vielen lieben Dank Ihr Beiden, also ich glaube Zweiteres möchte wohl eher in mein beschränktes Hirn gehen. Gefällt mir auch die Variante. Wenn alles nicht klappt werde ich es noch einmal mir der Lightbox probieren. Irgendwie werde ich mich schon da durchwursten. Liebe Grüße Ina Leicht transparenter Hintergrund bei... - Helmut - 13.08.2007 ... Zitat:also ich glaube Zweiteres möchte wohl eher in mein...nun mach dich mal nicht so klein. Das packts Du doch, falls nicht, hier fragen. Bau doch mal eine einfache Testseite, dann siehste wie es funktioniert, bzw. wo Probleme auftauchen. Cu Helmut Leicht transparenter Hintergrund bei... - lebus - 13.08.2007 Lieber Helmut, gut du hast mir Mut gemacht, ich versuche es mit der Lightbox, würde aber soweit es brennt und meine Zellen vollkommen versagen, gerne dann auf das Angebot der Unterstützung zurückommen. Wenn ich es einmal drin habe, dann geht es ja auch, ha... aber der Weg dorthin ist hart und steinig. Liebe Grüße Ina ;-) |