Hintergrund per Klick ändern

[Soundlab]

Hallo,

wollte mich mal erkundigen ob es ein Script, oder eine Möglichkeit gibt meinen Hintergrund (das Autobild) auf meiner Seite mit einen Klick auf den Link "Restaurant Blaue Adria" zu ändern?

Das Hintergrundbild besteht aus mehreren Teil-Bildern.

 

[Fabian H]

Da musst du per JavaScript das jeweilige Attribut ändern.

Und das dann einfach mehrmals, für jeden Hintergrund ein mal.

Bsp:

<div style="background-image:url(bild1.png);" id="Foo">lala</div>

<input type="button" onclick="window.document.getElementById('Foo').style['backgroundImage'] = 'url(\'bild2.png\')';" value="Bar">

 

[Soundlab]

Leider kann ich damit nicht all zu viel anfangen, bzw. weiß nicht ob ich da was ändern kann damit ich das für meine Zwecke nutzen kann. Was nicht sein darf ist dieser Button, da ich bereits einen Button habe wo bei Klick zwei IFrames geändert werden. Nun soll aber noch eine Funktion auf diesen Button. Und zwar die Funktion das sich das Hintergrundbild ändert. Hier die Seite nochmal . Vieleicht kann sich da einer Anhand des Quellcodes einen besseren Überblick verschaffen und mir helfen.

 

[aldor80]

Hi Leute,

brauche hierzu auch mal eure Hilfe. Habe fast das selbe Problem. Ich habe drei kleine Bilder auf einer HP. Jetzt möchte ich das wenn ich die Bilder anklicke das Hintergrundbild sich ändert. Habe hier schon eine gute möglichkeit gefunden http://www.tutorials.de/javascript-ajax/295866-background-images-wechseln.html, aber der Ablauf sollte folgender sein:

Durch jeden Klick soll sich das BG-Image ändern und zusätzlich soll das kleine Bild auch das selbe Bild sein wie das BG-Image, aber auch die anderen 2 kleinen Bilder sollen ausgewechselt werden.

Wichtig wäre mir erstmal das ich drei Bilder durchklicken kann.

<script language="JavaScript" type="text/javascript">
<!--
var flag=0;
function backgroundImage(){
if (flag==0){ document.getElementById('mybody').style.backgroundImage="url(http://localhost/wordpress/wp-content/uploads/2011/04/img_2.jpg)";
flag=1;
}
else if (flag==1){ document.getElementById('mybody').style.backgroundImage="url(http://localhost/wordpress/wp-content/uploads/2011/04/img_3.jpg)";
flag=2;
}
else if (flag==2){ document.getElementById('mybody').style.backgroundImage="url(http://localhost/wordpress/wp-content/uploads/2011/04/img_1.jpg)";
flag=0;
}
}
//-->
</script>

Hoffe Ihr blickt da durch.