Jimdo-Elemente » Bilder in Formular

08.06.2016 12:02

Rahel
#1

Ra

Hallo zusammen,
ich habe noch eine Frage

Und zwar überlege ich, in meinem Formular die Auswahl nicht nur per Text anzubieten, sondern auch mit Bildvorschau.

Möglichkeiten:

- Checkboxliste direkt mit Bildern zum auswählen
- Hover-"Tooltip"-Bild wenn ich über den entsprechenden Text gehe.

Ich würde ersteres bevorzugen.

Momentan sehen die einzelnen Checkbox-Felder so aus:

1
2
3
4
5
6
 

<label>
            <input name="m22709aebd4f0c0948" value="Rosengärten" accept="" id="m22709aebd4f0c0948" type="checkbox">
            <span>Rosengärten</span>
        </label>
 
 

Da alle Checkboxen die gleiche ID und Namen haben und nur verschiedene values, müsste ich das irgendwie damit verknüpfen.
Und da ich im normalen Jimdo-Formular nur Text eingeben kann und keine Bilder, wäre das dann wohl über JS...

Also überlege ich an einer Lösung, die ID und value verknüpft und dann appendchild() o.ä. dem label noch ein Bild mit unterschiebt.

1
2
3
4
5
6
7
8
 
for (document.getElementById("m22709aebd4f0c0948").value == Schaartor) 
{
   var img = document.createElement('IMG');
   img.setAttribute('src','Schaartor.png');
img.setAttribute('width','30px');
img.setAttribute('heigth','20px');
   document.getElementById('m22709aebd4f0c0948').parentNode.appendChild(img);
}
 

Allerdings funktioniert das so leider nicht....
Hat jemand schonmal sowas programmiert? Oder eine sinnvollere Lösung?

Ich bin dankbar für jede Hilfe!

Antworten

Beitrag melden

#2

12.06.2016 08:01 (zuletzt bearbeitet: 12.06.2016 08:03)

az_
#2

az_

...müsste so gehen: mit JQuery über das value eine Klasse ranhängen und danach das Bild per CSS ::after oder ::before {content: 'url()'}

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

14.06.2016 10:31

Rahel
#3

Ra

Rahel

So...nach langem hin und her probieren habe ich es jetzt gelöst! YAY

im CSS: (HTML-Code siehe unten)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    form.cc-m-form .cc-m-form-view-element .cc-m-form-view-input-wrapper .cc-m-form-checkable-vertical div label
    {
        height:230px;
        display:block;
        content:"";
        background: transparent url('') no-repeat; 
        background-position: bottom;
        padding:0 0 0 0px;
}
 
.rosen ::after 
    {content: "";    display:block;    height: 174px !important;    clear: both;    visibility: visible;
     background: transparent url('https://image.jimcdn.com/app/cms/image/transf/none/path/s405f8807974d929e/image/i63eb25162d1500e2/version/1465891402/image.jpg') no-repeat;}   
  
 

im JS:

1
 
$(document).ready(function(){$("input[value*='ROSEN']").parent().addClass('rosen');});

Vielen Dank!

Antworten

Beitrag melden

#4

14.06.2016 17:51

az_
#4

az_

so hab ich mir das vorgestellt! :) Gratuliere! Zeig uns mal, wo Du es getestet hast (URL)...

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html