Wie kann ich Hintergrundbilder von alleine wechseln lassen ?

BlackBoSs · 09.09.2012

Hallo Leute,

Kann man irgendwie mit Jquery oder Javascript, Hintergrundbilder einer Webseite automatisch wechseln lassen ?

Oder Hintergrundbilder erst dann wechseln lassen wenn ich die gewünschte Miniaturansicht anklicke und Hintergrundbild wird dann übernommen ?

Wenn ja, wie geht das, mit welche Codes oder gibt es dazu ein einfaches Tutorial wie man sowas hinbekommt?

Duddle · 09.09.2012

AW: Wie kann ich Hintergrundbilder von alleine wechseln lassen ?

http://vegas.jaysalvat.com/ und und http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/ sind jQuery Slideshows die Bilder im Hintergrund ändern.
http://www.gayadesign.com/diy/jquery-plugin-fullscreen-background/ maximiert Bilder im Hintergrund, ohne Slideshow.

Schau dir die Demos und Dokus der jeweiligen PlugIns an, dort siehst du was sie können und wie sie eingerichtet werden. Das Hintergrundbild selber per Script zu wechseln ist aber auch kein Problem, du musst ja nur den src vom <img>-Tag bzw. die entsprechende CSS-Eigenschaft ändern.

Duddle

BlackBoSs · 09.09.2012

AW: Wie kann ich Hintergrundbilder von alleine wechseln lassen ?

Duddle schrieb:
Das Hintergrundbild selber per Script zu wechseln ist aber auch kein Problem, du musst ja nur den src vom <img>-Tag bzw. die entsprechende CSS-Eigenschaft ändern.

Duddle

Erstmals danke für die netten Linkvorschläge, da diese echt gut aussehen.

Bezüglich selber per Script wechseln ist so ne Sache, ich weiss kenn die CSS Eigenschaft nicht

LG

randacek_pro · 09.09.2012

AW: Wie kann ich Hintergrundbilder von alleine wechseln lassen ?

Die Eigenschaft in CSS nennt sich "background" oder "background-image".
Du hast doch bestimmt im CSS-Stylesheet für das Element, bei dem du das Hintergrundbild wechseln möchtest, schon einen Hintergrund angegeben?
zB.

HTML:

body {
background: url(img/hintergrund.png);
}

oder

HTML:

body {
background-image: url(img/hintergrund.png);
}

In dem Beispiel gehe ich davon aus, dass du für den ganzen <body> den HG wechseln willst - das ist natürlich nur das Beispiel, um die Eigenschaft zu zeigen.

Du brauchst faktisch nur noch in einem Javascript angeben, gegen welches Bild ausgetauscht werden soll, die eigentliche Code-Zeile, die den Befehl ausführt.

PHP:

function bgchange () {
document.body.style.backgroundImage = "url(img/neuer_hintergrund.png);"
}

könnte also so aussehen. (auch wenn es hier als PHP steht - ist nur der Übersichtlichkeit halber - es ist JS)

Das heißt, die Eigenschaft, oder besser Syntax, die du für dein Javascript brauchst lautet: "document.hier dann das Element.style.backgroundImage".

Ansprechen kannst du das zB. so:

HTML:

<body>
 <a href="javascript:bgchange();"><img src="neuer_hg_thumb.png" alt="das soll dein Vorschaubild sein, auf welches du klickst, um den HG zu wechlsen" /></a>
</body>

Ich hoffe, ich konnte ein klein Wenig helfen?

Lieber Gruß