✔ Header wechselt immer wieder beim Neuladen

kdc · 20. März 2008

Header bild automatisch ändern

Hallo,
ich wollte fragen wie es geht, das sich das Header-Bild immer wenn man die Seite neu aktualisiert/eine neue aufruft sich ändert. So wie HIER
(Die haben dort eigentlich kein richtigen header aber ich meine das meistens Blaue da)

Kann mir das jemand einbauen?
So sieht der Header teil in meiner CSS Datei aus:

PHP:

/* headere & title */
.header {
	background: #222 url('img/header.jpg') no-repeat;
	height: 160px;
	margin-bottom: 5px;
	text-align: center;
}
.header .title {
	color: #FFF;
	padding-top: 50px;
}
.header .title .sitename a {
	border-bottom: 1px dashed #657382;
	color: #FFF;
	font: normal 3em sans-serif;
	padding-bottom: 2px;
	text-decoration: none;
}
.header .title a:hover {border-color: #F60;}
.header .title .slogan {
	font: normal 1.1em Verdana,sans-serif;
	padding-top: 6px;
}

HuRaHoRRe · 20. März 2008

Mhh ich will jetzt keinen fertigen code schreiben aber du könntest das ganze mit hilfe von PHP machen und zwar indem du deine Bilder in ein Array schreibst, einen Zufälligen Index generierst und das erhaltene Bild dann als Hintergrund einfügst.
Das ganze funktioniert natürlich nicht ohne weiteres mit einem externen Stylesheet, weshalb ich es einfach so machen würde:

HTML:

<div style="background:<?= $array[$random]; ?>;"></div>

TimoD · 20. März 2008

Hi,
wenn du PHP zur Verfügung hast, geht das recht gut!

Du kopierst die gewünschten Bilder in einen Ordner und benennst Sie 1, 2, 3,... .
Dann kannst du mit einer zufällig generierten Zahl aus dem Script auf ein Bild zugreifen und dies ausgeben.

Gruß Timo

EDIT: Da haben wir wohl beide gleichzeitig eine Antwort geschrieben!

Maik · 20. März 2008

Hi,

ich schieb das Thema aufgrund der Vorschläge dann erstmal ins PHP-Board, denn ohne eine client- oder serverseitige Scriptsprache lässt sich dein Vorhaben mit der Formatierungssprache CSS alleine nicht umsetzen.

Maik · 30. März 2008

Hi.

kdc hat gesagt.:
ich wollte fragen wie es geht, das sich das Header-Bild immer wenn man die Seite neu aktualisiert/eine neue aufruft sich ändert. So wie HIER
(Die haben dort eigentlich kein richtigen header aber ich meine das meistens Blaue da)

Ich hab den Link das letzte Mal aus Zeitmangel nicht verfolgt, dafür aber heute.

Ein Blick in den Quelltext der Seite beantwortet doch deine Frage, wie hier der automatische Bildertausch beim Reload der Seite umgesetzt wurde:

Code:

<body>
...

<script type="text/javascript">
		<!--
			var layer = new Array();
			layer[0] = '<img src=images/design/header_mitte.jpg alt="header" />';
			layer[1] = '<img src=images/design/header_mitte2.jpg alt="header" />';
			layer[2] = '<img src=images/design/header_mitte3.jpg alt="header" />';
			layer[3] = '<img src=images/design/header_mitte4.jpg alt="header" />';
		//-->
		</script>
<script type="text/javascript" src="http://www.about-pc.de/js/layerrotator.js"></script>

...
</body>

layerrotator.js

Code:

ausgabe = Math.round(Math.random()*(layer.length-1));

document.write(layer[ausgabe]);

Und für die Variante mit Hintergrundbildern empfehle ich dir:

Das Thema wird damit im Javascript-Forum platziert.

kdc · 31. März 2008

hey !

DANKE!

kdc · 31. März 2008

Hallo ich hatte vor kurzem einen Beitrage geschrieben, wo ich fragte ob es geht das sich der Header immer beim neuladen ändert.
Jetzt habe ich ein Script gefunden das immer ein neues Zufallsbild anzeigt.
Das ist der Script:

PHP:

<script language="JavaScript" type="text/javascript">
<!--

var image = new Array();
var link = new Array();

/** Hier die (Zufalls)-Bilder eintragen. **/


image[1] = 'http://lg3.lg.funpic.de/bannerroq.png';
image[2] = 'http://web269.fastserver.ch/banner2.gif';
image[3] = 'http://s3.directupload.net/images/080213/vzp2u26a.gif';
image[4] = 'http://80.190.202.79/pic/d/design-by-phisie/phisie_werbung_designxneu.gif';
image[5] = 'http://imgnow.de/uploads/banner720png.png';
image[6] = 'http://80.190.202.79/pic/p/prosquash/prosquashbanner_banner.jpg';
image[7] = 'http://80.190.202.79/pic/g/games-4-ever/banner.jpg';
image[8] = 'http://80.190.202.79/pic/s/sjb/t1.jpg';
image[9] = 'http://www.bubbl.bplaced.net/banner/partners/bfp-banner2.gif';
image[10] = 'http://mod-design.pytalhost.eu/banner.png';
image[11] = 'http://wasko.wa.funpic.de/coolforum.png';


/** Hier die (Zufalls)-Links eintragen. **/


link[1] = 'http://roque-design.de.tl?out=1';
link[2] = 'http://roque-design.de.tl?out=4';
link[3] = 'http://roque-design.de.tl?out=3';
link[4] = 'http://roque-design.de.tl?out=2';
link[5] = 'http://roque-design.de.tl?out=5';
link[6] = 'http://roque-design.de.tl?out=7';
link[7] = 'http://roque-design.de.tl?out=8';
link[8] = 'http://roque-design.de.tl?out=6';
link[9] = 'http://roque-design.de.tl?out=9';
link[10] = 'http://roque-design.de.tl?out=10';
link[11] = 'http://roque-design.de.tl?out=11';



/** Ab hier nichts mehr ändern! **/

var num = Math.random();
var ran = Math.floor((image.length - 1) * num) + 1;

document.write('<a href="' + link[ran] + '"><img src="' + image[ran] + '" border="0" /></a>');
//-->
</script>

Jetzt wollte ich fragen ob ich das bei mir in der CSS Datei einbinden kann.

Mein Header Teil sieht so aus:

PHP:

/* headere & title */
.header {
	background: #222 url('start-header.jpg') no-repeat;
	height: 160px;
	margin-bottom: 5px;
	text-align: center;
}
.header .title {
	color: #FFF;
	padding-top: 50px;
}
.header .title .sitename a {
	border-bottom: 1px dashed #657382;
	color: #FFF;
	font: normal 3em sans-serif;
	padding-bottom: 2px;
	text-decoration: none;
}
.header .title a:hover {border-color: #F60;}
.header .title .slogan {
	font: normal 1.1em Verdana,sans-serif;
	padding-top: 6px;
}

Kann mir jemand helfen?

Maik · 31. März 2008

Hi,

ich häng deine Frage hier im Thema an, und möchte dich darum bitten, zukünftig soIche "Crosspostings" zu vermeiden. Vielen Dank!

Zum Thema: Mit diesem "neuen" Script soll ein Grafik-Link (<a href="..."><img src="..."></a>) ins Dokument geschrieben werden, und du möchtest
im Header ein Hintergrundbild tauschen.

Hatte ich dir nicht zwei Links für die "Hintergrundbild"-Variante empfohlen?

Sven Mintel · 1. April 2008

Da dein Webspace bei funpic.de ist, hast du dort PHP verfügbar, ich würde daher empfehlen, es damit zu machen, weil es unnötigen Traffic einspart und kein aktiviertes JS beim User vorraussetzt.

Die Herangehensweise ist ähnlich der in JS

Code:

<?php
  $bgs=array(
              'pfad/zum/bild.png',
              'http://blubb.de/anderesbild.png',
              'uswusf.jpg'
             );
  shuffle($bgs);
?>
<style type="text/css">
<!--
#selektor{background-image:url(<?php echo $bgs[0];?>);
-->
</style>

kdc · 7. April 2008

danke !
ich werds ma ausprobieren!

✔ Header wechselt immer wieder beim Neuladen

kdc

HuRaHoRRe

Erfahrenes Mitglied

TimoD

Maik

Maik

kdc

kdc

Maik

Sven Mintel

Mitglied

kdc

Neue Beiträge