Bilder anklickbar machen bei Caldera Formularen

Marsbasis

Hallo zusammen,

auf folgender Seite:
https://outfit.trendline-freyung.de/stylebox-konfigurator/

...würde ich gerne die Fotos anklickbar machen. Also d.h., ein einzelnes Bild soll sich genauso wie ein Radio-Button verhalten.

Wie setze ich sowas um?

Liebe Grüße
Chris

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Ein Ansatz wäre sowas hier:

Code

label[for="fld_4545467_1_opt1275013"] {
    background-image: url("/wp-content/uploads/tshirt_ja.jpg");
    width: 250px;
    height: 440px;
}

Marsbasis

Okay vielen Dank, damit komme ich schon einen Schritt weiter.

Ich habe in Wordpress im Customizer unter Zusätzliches CSS folgendes eingetragen:

Code

/* Calderaforms: HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* Calderaforms: IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}


/* Calderaforms: CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

Alles anzeigen

Im Formular steht dann noch folgender Code:

Code

<label>
  <input type="radio" name="tshirt" value="ja">
  <img src="/wp-content/uploads/tshirt_ja.jpg">
</label>


<label>
  <input type="radio" name="tshirt" value="nein">
  <img src="/wp-content/uploads/tshirt_nein.jpg">
</label>

Das passt soweit schon ganz gut, nur der rote Rahmen erscheint nicht, der eigentlich bei einem klick auf das Bild aufleuchten sollte. Warum?

LG.

b3317133

Derzeit ist ein [FONT=Courier New] [/FONT] zwischen dem [FONT=Courier New]radio[/FONT] und dem [FONT=Courier New]img[/FONT], daher funktioniert das [FONT=Courier New]+[/FONT] nicht.

Marsbasis · Bildschirmfoto 2021-02-05 um 11.52.08.webp

Okay, hätte ich nun beseitigt aber es tut sich immer noch nix...
Hier der Seitenquelltext als Anhang.

b3317133

Zitat

<label> 
<input type="radio" name="tshirt" value="ja">[COLOR=#ff0000] [/COLOR]
<img src="/wp-content/uploads/tshirt_ja.jpg"> 
</label>

[FONT=Courier New][COLOR=#ff0000] [/COLOR][/FONT] entfernen oder [FONT=Courier New]radio + br + img[/FONT] ...

Marsbasis

Ohmeingott wie kann man denn nur so blind und dumm sein.
Läuft!
Dankesehr.

LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder anklickbar machen bei Caldera Formularen

Jetzt mitmachen!