Bilder in Formular

Antworten
#1
08.06.2016 12:02
avatar  Rahel
#1
Ra
Rahel

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)
avatar  az_
#2
avatar
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
avatar  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
avatar  az_
#4
avatar
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


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!