Mit Radiobutton Hintergrundbild eines DIV-Elements ändern

CreativPur

Erfahrenes Mitglied
Hi,

ich habe folgendes Anliegen.

Ich habe per Radiobutton eine Auswahl an an Hintergrundbilder für das Div-Element "class="bg_image".

Wenn ich ein Hintergrundbild auswähle, soll dieses natürlich als Hintergrundbild in diesem DIV-Element erscheinen.

Der Code für die Radioauswahl:

Code:
<?php
                                for ($i = 1; $i <= 15; $i++) {
                                       $fotonr=str_pad($i, 1, "0", STR_PAD_LEFT);
                                echo '
                                <label><input type="radio" name="bg_image" id="bg_image'.$i.'" class="jpg" value="'.$fotonr.'" ';
                                if($bg_image==''.$fotonr){echo' checked';}else{echo'';}
                                echo '/>
                                <img class="bg_image" src="/Hintergrundbilder/klein/'.$fotonr.'.jpg"'.$fotonr.'" width="100" height="80" ></label>
                                ';
                                }
?>

Der Code für das DIV-Element:

Code:
<div class=" bg_image" style=" background-image:url(/Hintergrundbilder/mittel/8.jpg);"></div>

Ich weiß absolut keinen Ansatz, wie ich das PHP-Script dafür schreiben muss.
 
Das einfachste wäre doch etwas in dieser Richtung:
PHP:
if( isset( $_POST['bg_image'] ) {
        echo '<div class=" bg_image" style=" background-image:url(/Hintergrundbilder/mittel/'.$_POST['bg_image'].'.jpg);"></div>';
    } else {
        echo '<div class=" bg_image" style=" background-image:url(/Hintergrundbilder/mittel/8.jpg);"></div>';
    }

In dein Code fällt mir etwas auf, dass das Image nicht richtig erstellt wird
dieses hier
PHP:
 ...<img class="bg_image" src="/Hintergrundbilder/klein/'.$fotonr.'.jpg"'.$fotonr.'" width="100" height="80" > ...

Würde etwas in der Richtung erstellen
HTML:
<img class="bg_image" src="/Hintergrundbilder/klein/7.jpg"7 width="100" height="80" >

Wieso ist das eine $fotonr noch einmal nach der src - Property?
Oder war das nur ein Copy and Paste fehler?

Außerdem fehlt der Closing Tag für das Image, also zumindest das '/>'.
 
In der Tat hat ich beim Kopieren einen Fehler eingeschlichen.

Daher hier nochmals der gesamte Quelltext.

CSS:
Code:
.hintergrund { height:700px; border-style: inset; background-image:url(/Hintergrundbilder/mittel/<?=$bg_image?>.jpg);)}

Das DIV-Element wo das Hintergrundbild erscheinen soll:
Code:
div class=" hintergrund" id="bg_image"></div>

Die Buttonauswahl mit Mini-Bildern welche auch angezeigt werden. Die Bilder sind in zwei Gruppen aufgeteilt. bild 1-9 und 10-24.
Code:
<?php

for ($i = 1; $i <= 9; $i++) {
       $fotonr=str_pad($i, 1, "0", STR_PAD_LEFT);
echo '
<label><input type="radio" name="bg_image" id="bg_image'.$i.'" class="jpg" style="margin-right:-26px; font-size:40px;" value="'.$fotonr.'" ';
if($bg_image==''.$fotonr){echo' checked';}else{echo'';}
echo '/>
<img src="/Hintergrundbilder/klein/'.$fotonr.'.jpg" alt="'.$fotonr.'" width="100" height="80" ></label>
';
}

for ($i = 10; $i <= 24; $i++) {
       $fotonr=str_pad($i, 2, "0", STR_PAD_LEFT);
echo '
<label><input type="radio" name="bg_image" id="bg_image'.$i.'" class="jpg" style="margin-right:-26px; font-size:40px;" value="'.$fotonr.'" ';
if($bg_image==''.$fotonr){echo' checked';}else{echo'';}
echo '/>
<img src="/Hintergrundbilder/klein/'.$fotonr.'.jpg" alt="'.$fotonr.'" width="100" height="80" ></label>
';
}

?>

Zum Schluss das Script:
Code:
<script>
$(document).on('click', '.bg_image', function (){
var src=$(this).attr('src');
$("#bg_image").css("hintergrund","url('"+src+"')");
});
</script>

Irgendwo ist hier der Wurm begraben..
 
Zuletzt bearbeitet:
Ach du wolltest die Änderung mittels JavaScript machen.

In JavaScript Repräsentiert this bereits Objekt, deshalb ist das $(this) nicht Notwendig.
Außerdem ist "hintergrund" keine gültige CSS Eigentschaft.

Deshalb müsste dein Code so aussehen.
Javascript:
$(document).on('click', '.bg_image', function (){
       var src=this.attr('src');
       $("#bg_image").css("background-image","url('"+src+"')");
});
 
In JavaScript Repräsentiert this bereits Objekt, deshalb ist das $(this) nicht Notwendig.
Soweit sich in jQuery nicht etwas Fundamentales geändert hat, müsste es immer noch so sein, wie ich es das letzte Mal benutzt habe: jQuery gibt an DOM Event Callbacks immer das native DOM-Objekt als Kontext (this) weiter. Ergo ist $(this) nicht nur korrekt, sondern auch notwendig, wenn man auf die jQuery-Funktion attr() zurückgreifen möchte.

Das Problem ist, dass es kein Element gibt, welches auf den folgenden Selektor zutrifft:
Javascript:
2.$(document).on('click', '.bg_image'

Es gibt schlichtweg kein Element, das eine Klasse bg_image besitzt. Es gibt Elemente, deren id- oder name-Attribute bg_image beinhalten, aber keine class-Attribute.
 
ich hatte vorhin nur Kurz auf jsFiddle getestet, lieferte this das DOM-Objekt, welches ja auch benötigt wird.
Wogegen $(this) ein Objekt des Typs jQuery.fn.init zurück gibt.
Dieses beinhaltet zwar auch das DOM-Objekt, allerdings müsste man dann die zuweisung in der Funktion so aussehen.
Javascript:
var src=$(this)[0].attr('src');

Was unbedingt benötigt wird ist das $(document), um das document anzusprechen.
jQuery ist doch bissl bekloppt, ich weiss schon weshalb ich mittlerweile auf Mootools umgestiegen bin.
 
Zurück