zufallsbild script in der css

mischalemaus

Hallo ich möchte in meiner homepage, das das loge zufällig erscheint.

es stehen 5 logos zu verfügung.

meine css.php sieht so aus:

PHP

<?php
header('Content-type: text/css');
$randomimg = mt_rand(1,5); 
?>
 
#logo {
color:#800000;
background-color:#000;
font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
font-size: 22px;line-height: 20px;
font-variant:small-caps;
vertical-align:bottom;
text-align:left;
padding-top:0px;
padding-left:10px;
padding-bottom:50px;
background-image:url(<?php echo '<img src="images/logo/'.$randomimg.'.jpg" alt="Zufälliges Bild" />'; ?>);
background-repeat:no-repeat;
background-position: 50% 50%;
border-right:solid 1px #000;
}

Alles anzeigen

in meiner index.php habe ich folgendes im head bereich:

Code

<link rel="stylesheet" href="css.php" type="text/css">

es wird kein zufallsbild angezeigt.
das logo fenster bleibt schwarz....

was habe ich falsch gemacht ?

gruß
micha

reeperbahner11

Also auf den ersten Blick würde ich sagen, entweder .css oder .php aber css.php , das habe ich noch nie gesehen/gehört

Also deine css datei bindest du zwischen <head></head> ein, wenn sie denn style.css oder design.css oder so heisst. Und die PHP via include in den Bereich wo Sie angezeigt werden soll. Allerdings darf die zwar css.php heissen doch weiß ich nicht ob Css dann interpretiert wird. btw. ich glaube es auch nicht

thilda

Mein Tipp:

Code

header('Content-type: text/css');

Löschen und dann nochmal schaun was passiert.
An sich funktioniert das script ja.

Afrael

Dein Script ist PHP-mäßig richtig, aber vom CSS her falsch. Schau dir nochmal die Syntax für background-image an.

An die anderen: der header sendet einen sogenannten MIME-Type, der dem Browser sagt, dass er die Datei nicht als z.B. HTML-Datei, sondern als CSS-Datei auffassen soll. Mit header("Content-type: text/javascript"); könnte man zum Beispiel eine Uhr generieren, die von der Serverzeit ausgeht, aber mit Javascript weiterläuft.

thilda

Der header soll aber als aller erstes kommen. Tut er ja aber nicht da er erst mit dem aufrufen der CSS-datei kommt oder sehe ich das falsch?

Afrael

Jein. Die Datei wird ja nicht über den Server eingebunden, sondern über HTTP. Dabei geht der Browser die Dateien durch, die sonstwo im Quelltext angegeben sind (<img src=...>, <link href=...>, <script src=...>) und guckt, auf welche Art er sie einbindet. Der img-Tag zum Beispiel erwartet den MIME-Typ image/jpeg, image/gif oder ähnliches. Bei <link rel="stylesheet" type="text/css"> erwartet der Browser den MIME-Typ text/css. Da die Datei aber auf .php enden muss, damit sein Code interpretiert wird, hat er den an den Browser geschickten MIME-Type über header() geändert.

Grevas

So kann das wirklich nicht funktionieren... PHP bitte in der php datei und css in der css datei.

dann darfst du nach dem header dein php script includen der dir den path zufällig generiert und in einem <style> block dann background-img neu setzen (in der css datei würd ichs auch noch lassen als default...)

hier mal ein beispiel das ich grad zusammengewürfelt hab.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Random Background-color</title>
<link href="pic.css" rel="stylesheet" style="text/css" />


<?php
$random = rand(0,16777215);
$hex = dechex($random);
?>


    <style type="text/css">
  <!--
    #background { background-color: #<?php echo $hex;?>; }
  //-->
  </style>
</head>


<body>
<div id='background'>
&nbsp;
</div>
</body>
</html>

Alles anzeigen

CSS:

Code

#background {
background-color: #fff;
width: 500px;
height: 500px;
}

Damit dürfte alles klar sein oder? *g*

/p.s.: alles ab <?php bis </style> kannst du auch natürlich in ne andere datei auslagern

Afrael

Zitat von Grevas

So kann das wirklich nicht funktionieren... PHP bitte in der php datei und css in der css datei.

Dann bitte style-Tags auch in den head-bereich

Grevas

Zufrieden nun? Hab jetzt auch brav ein Doctype reingeklatscht.

mischalemaus

hey,

habe es nun so gelöst:
css.php

Zitat

<?php
header('Content-type: text/css');
$bilder = array(
'/images/logo/1.jpg',
'/images/logo/2.jpg',
'/images/logo/3.jpg',
'/images/logo/4.jpg',
'/images/logo/5.jpg'
);
$zufallsbild = $bilder[rand(0, count($bilder)-1)];
?>

#logo {
color:#800000;
background-color:#000;
font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;
font-size: 22px;line-height: 20px;
font-variant:small-caps;
vertical-align:bottom;
text-align:left;
padding-top:0px;
padding-left:10px;
padding-bottom:50px;
background-image: url(<?= $zufallsbild ?>);
background-repeat:no-repeat;
background-position: 50% 50%;
border-right:solid 1px #000;
}

Alles anzeigen

in meiner index.php:

<link rel="stylesheet" href="css.php" type="text/css">

kann ich das so belassen, ist es korrekt ?
also funktionieren tut es...

lg

Afrael

Jap, ist korrekt. Nur ob das in der Form stilistisch richtig ist, darüber kann man sich streiten.

Grevas: Jap, danke

mischalemaus

hey,

zu meinem jetzigen lösung noch eine frage.

ich möchte gern zu jedem bild eine "alt" aributte haben.

wie kann ich das realisieren?
kann mir jemand den code in dem sinne erweitern ?

lg

thilda

Da es ja ein Background-image ist wird das mit dem alt-Tag nicht so wirklich gehen...

Ansonsten einfach alles in das Array rein.

mischalemaus

kann mir das jemand machen ?

weiß nicht so recht wie ich das anstellen soll ....

lg

thilda

Also wie schon gesagt bekommst du das alt-Element nicht in das Background-Image.
Aber ich habe gerade mal eine Suchmaschine dazu angeschmissen und das hier als Alternative gefunden.

Code

<div id="xxx" title="Alternativtext"></div>

Tags

Benutzer online in diesem Thema