--- title: "Wrap um Bilder, mit aktiviertem „Klick-vergrössern“" url: "https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern" source: "typo3.net" tags: ["Allgemein","Bilder","Frage","HTML & CSS"] created: "2006-07-05" last_reply: "2006-07-07" replies: 21 solved: false page: 1 pages: 1 lang: "de" --- # Wrap um Bilder, mit aktiviertem „Klick-vergrössern“ Allgemein · 21 Antworten · gestartet 2006-07-05 ## Eröffnungsbeitrag **igorshmigor** · 2006-07-05 · [Beitrag #1](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/1) Ich möchte Bilder mit der Funktion „Klick-vergrössern“ gesondert darstellen, so dass der User sofort weiß, dass er die Bilder anklicken kann. Wie mache ich das? ## Antworten ### [#2](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/2) · Unbekannter Benutzer · 2006-07-05 Du gibts im Content Bereich, den Du hoffentlich über ein div o.ä. im HTML definiert hast, Bilder die verlinkt sind eine entsprechende Formatierung mit. Oder Du suchst die Klasse des Bildes raus und formatierst diese. Hat das Bild keine Klasse, gibst Du sie über wrap mit (im TSOB zum entsprechenden Objekt durchklicken). Viele Grüße Niki ### [#3](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/3) · Proximo · 2006-07-05 Sehr allgemeine Frage... Benutze bitte die Suche hier im Forum... die Modifikationen sind möglich über ```typoscript tt_content.textpic.20.1... ``` MFG Proximo EDIT: Ich würd mir das mit CSS ebenfalls überlegen, ist warscheinlich um einiges einfacher ### [#4](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/4) · igorshmigor · 2006-07-05 Danke für die Antworten. So richtig weiter hat mich das aber leider nicht gebracht. Klassen gehen in meinem Fall nicht, ich brauche einen wrap, da ein DIV über das Bild gelegt werden soll (mit Lupensymbol in der Ecke rechts unten). Ich habe die Suchfunktion genutzt, bin dabei auch auf "tt_content.textpic.20.1. ..." gestoßen. Habe dabei aber nur Informationen gefunden wie ich das aufpoppende Bildfenster verändern kann, nicht jedoch das Bild mit dem Link. ### [#5](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/5) · Unbekannter Benutzer · 2006-07-05 > Klassen gehen in meinem Fall nicht, ich brauche einen wrap, da ein DIV über das Bild gelegt werden soll (mit Lupensymbol in der Ecke rechts unten). ehm :o alles durcheinandergeworfen. Über "wrap" legst Du ein div um das Bild und das div hat eine Klasse. Über die Klasse kannst Du es dann im CSS ansprechen. > Ich habe die Suchfunktion genutzt, bin dabei auch auf "tt_content.textpic.20.1. ..." gestoßen. Habe dabei aber nur Informationen gefunden wie ich das aufpoppende Bildfenster verändern kann, nicht jedoch das Bild mit dem Link. genau dort bist Du richtig, such noch mal genauer. Vielleicht gibts das wrap um das Bild noch nicht, dann musst Du es anlegen. Viele Grüße Niki ### [#6](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/6) · igorshmigor · 2006-07-05 > **Niki schrieb:** > > ehm :o alles durcheinandergeworfen. > Über "wrap" legst Du ein div um das Bild und das div hat eine Klasse. Über die Klasse kannst Du es dann im CSS ansprechen. Die Frage ist: wie kriege ich es hin, dass nur die Bilder, die vergrößerbar sind per Typo3 die Klasse erhalten, die ich mit CSS ansprechen soll. Die Situation ist folgende: Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten. ### [#7](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/7) · Unbekannter Benutzer · 2006-07-05 > Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten. Images mit Popup sind verlinkt. Über den a Tag kannst Du das also im CSS steuern (nur Bilder mit div blablabla und a-tag aussen rum bekommen die entsprechende Formatierung). Viele Grüße Niki ### [#8](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/8) · igorshmigor · 2006-07-05 Sehr witzig. Mit CSS kann ich nur Hintergrundbilder einfügen. Wenn die CSS-Klasse auf das IMG Tag angewendet wird, dann ist die Lupe im Hintergrund des Bildes und damit nicht sichtbar. ### [#9](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/9) · Unbekannter Benutzer · 2006-07-05 > Sehr witzig. Mit CSS kann ich nur Hintergrundbilder einfügen. Wenn die CSS-Klasse auf das IMG Tag angewendet wird, dann ist die Lupe im Hintergrund des Bildes und damit nicht sichtbar. Versuch doch Deine Anforderungen von Anfang an genau zu beschreiben anstatt Dich über Antworten zu beschweren. Du könntest in diesem Fall den GIFBUILDER verwenden und die Lupe systemseitig drauf rechnen lassen. Problematisch ist hierbei jedoch meist die Grafikqualität die etwas leidet. Oder Du nimmst den A-Tag vom Bild weg und legst ihn um die Lupe die Du in ein div packst das Du über das Bild legst und dort gibts dann ein Hintergrundbild. Macht man beides über den TSOB bzw. das TS Template. Hast Du das gewünschte Ergebnis-HTML schon fertig? Am besten immer erst mal in HTML eine Vorlage bauen und dann in Typo3 umsetzen. Viele Grüße Niki ### [#10](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/10) · igorshmigor · 2006-07-05 Ich habe kein Problem den entsprechenden HTML und CSS Code zu erstellen. Das ist alles Pipifax. Das Problem ist, per Typoscript automatisch die anklickbaren Bilder anzusprechen. Habe ich auch mit tt_content.textpic.20.1...nicht hinbekommen. Da habe ich schon die wildesten Kombination gebaut bis hin zu tt_content.textpic.20.1.imageLinkWrap.typolink.linkWrap= ... Hat aber alles nicht funktioniert. Wie muss es richtig aussehen??? #angry# > Versuch doch Deine Anforderungen von Anfang an genau zu beschreiben anstatt Dich über Antworten zu beschweren. Tut mir leid, ich bin nur frustriert. Ich dachte ich hätte meine Anforderungen genau beschrieben, als ich schrieb *„Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten“*. Beispiele sind natürlich besser. Ich habe jetzt eins gefunden: Die machen es genau so, wie auch ich es umsetzen will, nur mit einem kleinen Plus-Icon statt einer Lupe. Wie gesagt, die HTML- und CSS-Codes sind nicht das Problem. ### [#11](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/11) · workfare · 2006-07-05 nicht aufregen ... folgendes stammt hier aus dem Forum (aber ich finde es nicht)und zaubert eine Lupe ins Bild SETUP ```typoscript tt_content.image.20 { 1 { stdWrap.innerWrap = {$template.clickEnlarge} stdWrap.innerWrap { if.isTrue.field = image_zoom ifEmpty.field = image_link } } ``` Entsprechend Constants ```typoscript template.clickEnlarge = | ``` Und CSS: .clickenlarge { display: block; text-align: right; padding: 0px 4px; margin-top: -2em; height: 2em; } .clickenlarge img { border: 0px !important; } unf fertig! Aber: Die Lupe ist nicht klickbar, man muss NEBEN sie klicken, nicht wirklich intuitiv ... ### [#12](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/12) · Unbekannter Benutzer · 2006-07-05 Bei Volkswagen wird das Bild direkt in die Grafik gerechnet sh. Das wäre mit TypoScript auch möglich (GIFBUILDER) aber da hast Du das Problem mit der Grafik-Qualität. Muss man aber ausprobieren und auch die diversen Tipps hier im Forum durchwühlen wie man die Grafikqualität des GIFBUILDER verbessert. Evtl. kriegst Du damit die Qualität ausreichend hin. Falls nicht wirds technisch interessant, dann käme der Einsatz einer anderen Bildberechnungssoftware, Änderungen an ImageMagick oder eine eigene Extension mit der Du die Bildrechenoperationen selbst machst in Frage. Vielleicht hat sonst jemand noch eine Idee? Im Bereich GIFBUILDER bin ich nicht der ausgewiesene Experte. Der Code von workfare schaut auch interessant aus, auf jeden Fall als Alternative zum GIFBUILDER testen! Viele Grüße Niki ### [#13](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/13) · igorshmigor · 2006-07-05 > **Niki schrieb:** > > Bei Volkswagen wird das Bild direkt in die Grafik gerechnet sh. > Tschuldigung, falscher Link. Ich meinte diese Volkswagen-Seite: Vielen vielen Dank, workfare, ich glaube das ist genau das was ich suche. Werde es gleich morgen ausprobieren. Jetzt ist erst mal Feierabend. Echt super, dass Du dir die Mühe gemacht hast das Script rauszusuchen. ### [#14](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/14) · igorshmigor · 2006-07-05 Hab's doch schon jetzt getestet. Und es klappt! Nochmal danke, workfare. Auf die Lösung wäre ich von alleine nie gekommen und im Forum habe ich mich auch schon totgesucht. ```typoscript if.isTrue.field = image_zoom ifEmpty.field = image_link ``` auf so was kommt doch kein Mensch! (ich jedenfalls nicht ;) ) ### [#15](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/15) · Unbekannter Benutzer · 2006-07-05 Super dass es jetzt klappt :-) ganz kurz noch zur VW Seite: auf dem neuen Link haben die das mit HTML / CSS gelöst: ```html + ``` CSS sh. direkt auf der VW Seite. Viele Grüße Niki ### [#16](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/16) · igorshmigor · 2006-07-05 Ja, Niki, ich weiß wie die das auf der Seite gemacht haben. > **igorshmigor schrieb:** > > Ich habe kein Problem den entsprechenden HTML und CSS Code zu erstellen. Das ist alles Pipifax. > **igorshmigor schrieb:** > > Wie gesagt, die HTML- und CSS-Codes sind nicht das Problem. ### [#17](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/17) · workfare · 2006-07-06 Schön, dass es das war, was du willst. Aber das Problem bleibt, dass die Lupe selbst nicht klickbar ist oder hast du das gelöst? Grüße / Jens ### [#18](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/18) · igorshmigor · 2006-07-06 Nein, Du hast Recht. Ausgerechnet die Lupe selbst ist nicht anklickbar. Aber damit kann ich erst mal leben. ### [#19](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/19) · igorshmigor · 2006-07-06 Die Lupe ist jetzt auch anklickbar. Habe das mit Javascript gelöst: im TS: ```typoscript stdWrap.innerWrap = | ... page.headerData.10=TEXT page.headerData.10.value( } ``` Dabei weise ich der Lupe einen leeren Link zu und gebe ihm mit einer Zufallszahl einen Namen, damit dieser Link im JavaScript über den Namen angesprochen werden kann. Dann erhält der leere Link die Anweisung *openparentlink(this.name)*. Diese JavaScript Funktion wird weiter unten beschrieben. Sie liest den vorhergehenden Link aus und ruft dann die Typo3-generierte JavaScript-Funktion openPic mit der ausgelesenen URL auf. Umständlich, aber es funktioniert. P.S.: Die Breite und Höhe des aufpoppenden Fensters ist in meiner Lösung fest vorgeschrieben mit width=660,height=403. Das funktioniert in meinem Fall, da die Bilder tatsächlich alle diese Größe haben, ist bei verschieden großen Bildern aber natürlich unbrauchbar. ### [#20](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/20) · Unbekannter Benutzer · 2006-07-06 > Ja, Niki, ich weiß wie die das auf der Seite gemacht haben. Dann muss ich jetzt doch fragen, warum Du das dann nicht auch so gemacht hast sondern diesen thread gestartet hast? Ist ja schön dass es jetzt auch mit einer anderen Lösung funktioniert, aber die o.g. Lösung hätte so gut wie kein TS erfordert ... und Du hattest glaub ich ziemlich deutlich gemeckert dass Du die Lupe nicht mittels CSS drauflegen kannst aber genau das ist ja auf der VW Seite gemacht worden. Viele Grüße Niki ### [#21](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/21) · igorshmigor · 2006-07-06 > und Du hattest glaub ich ziemlich deutlich gemeckert dass Du die Lupe nicht mittels CSS drauflegen kannst aber genau das ist ja auf der VW Seite gemacht worden. Die Volkswagen-Lösung ist auch keine reine CSS-Lösung. Das Plus-Zeichen liegt in einem extra-Div, es ist nicht nur eine Klasse, die dem eigentlichen Bild zugewiesen wurde. ```html + ``` ist das Plus-Zeichen ```html ``` ist das eigentliche Bild. Sprich, auch dort mußte das CMS erst prüfen, welche Bilder anklickbar sind, und denen dann dieses extra-Div mit dem Plus voranstellen. Das Problem ist, wie prüfe ich mittels Typoscript welche Bilder vergrößerbar sind. Deshalb habe ich diesen Thread erstellt und workfare hat es offensichtlich sofort verstanden und gleich die richtige Lösung geboten. Trotzdem Danke für deine vielen Bemühungen, es war nur leider ein Mißverständnis. Tut mir Leid wenn ich mich unverständlich ausgedrückt habe. ### [#22](https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern/22) · igorshmigor · 2006-07-07 Vielleicht sollte ich auch erklären warum ich mit Deiner Lösung ein Problem habe. Wenn ich das richtig verstanden habe schwebt Dir so etwas vor: ```html
``` und im CSS dann so etwas wie ```html .lupe { width:20px; height:20px; margin-top:-30px; margin-left:-2000px; position:relative; } .bild a img.lupe { margin-left:60px; } ``` So wird das Lupenbild nur sichtbar, wenn es verlinkt ist. Damit habe ich aber zwei Probleme: 1.) wie kriege ich es hin, dass der Link das Lupenbild mit einschliesst? Alles was ich mit wrap davor oder dahinter hänge ist doch außerhalb der Tags, oder? linkWrap geht nur bei Menüitems, wenn ich mich nicht irre. Dafür gibt es sicher auch eine Lösung, aber welche? 2.) Auf diese Weise erhalten alle Bilder mit Link eine Lupe. Das will ich aber nicht. Es kann ja auch solche Bildlinks geben: [Bild: adobe.com/…/get_adobe_reader.gif](http://www.adobe.com/images/get_adobe_reader.gif) Würde blöd aussehen, wenn da eine Lupe drüber wäre. > Oder Du nimmst den A-Tag vom Bild weg und legst ihn um die Lupe die Du in ein div packst das Du über das Bild legst und dort gibts dann ein Hintergrundbild. Das war für mich auch so eine TypoScript-Voodoo Geschichte. Ich nehme an, die meisten Anfänger wissen wie man ein A-Tag vom Bild wegnimmt und auf einen div packt. --- Quelle: „Wrap um Bilder, mit aktiviertem „Klick-vergrössern““, typo3.net, https://www.typo3.net/d/45942-wrap-um-bilder-mit-aktiviertem-klick-vergroessern Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.