Per Zufall wechselnde Hintergrundgrafiken erzeugen mit css

Area51sbk

Hallo!

Leider finde nichts im Net wo ich mit css eine zufällige Hintergrundgrafik laden kann. (nur mit php) Ich wollte css nehmen da ich schon so viel Java auf meiner Seite verwende und so langsam alles auf css umschreiben wollte. Habe bis jetzt die Erfahrung gemacht das alles mit css am besten funktioniert und auch viel Java ersetzen kann.
Vielleicht könnt ihr mir helfen.

Danke schon einmal an alle die mir Helfen können / wollen.

HTML

<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">


<style type="text/css">
body {background-image:url(motor.jpg); background-repeat:no-repeat;
background-position:50% 50%; background-attachment:fixed;}
</style>
<script language="JavaScript"> 
<!-- 
var message=""; 
function clickIE() {if (document.all) {(message);return false;}} 
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) { 
if (e.which==2||e.which==3) {(message);return false;}}} 
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} 
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} 


function disableselect(e){ 
return false 
} 
function reEnable(){ 
return true 
} 
document.onselectstart=new Function ("return false") 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 
} 


function scrollit_r2(seed)
{
  var m1  = " Herzlich Willkommen                                                                             ";
  var m2  = "                                                 Tragen Sie zur Verbesserung bei und schreiben Sie uns ihre Meinung";
  var msg=m1+m2;
  var out = " ";
  var c   = 1;
  if (seed > 100)
	 {
          seed--;
          var cmd="scrollit_r2(" + seed + ")";
          timerTwo=window.setTimeout(cmd,50);
	 }
    	 else if (seed <= 100 && seed > 0)
		 {
	  	  for (c=0 ; c < seed ; c++)
		      {
        	  	out+=" ";
		      }
  		  out+=msg;
		  seed--;
		  var cmd="scrollit_r2(" + seed + ")";
  		  window.status=out;
  		  timerTwo=window.setTimeout(cmd,100);
 		 }
    		  else if (seed <= 0)
			 {
           		  if (-seed < msg.length)
			    {
                	     out+=msg.substring(-seed,msg.length);
                	     seed--;
                	     var cmd="scrollit_r2(" + seed + ")";
                             window.status=out;
                	     timerTwo=window.setTimeout(cmd,100);
      			    }
            		     else
				 {
                		   window.status=" ";
                		   timerTwo=window.setTimeout("scrollit_r2(100)",45);
		                 }
      			 }
}
// -->
</script>
</head>


<body>




<font color="#FF0000">usw vieles mehr </font>


























jhagskn


























eaogoet
</body>
</html>

Alles anzeigen

chris90night

JAVA != JavaScript!!!

BendOr

Mit css kannst du das nicht, das ist keine script-sprache

Area51sbk

Danke schon einmal für eure Antworten! Was kann ich da am besten nehmen? Möchte möglichst Die bisherigen Funktionen behalten die ich eingestellt habe. Achso sollte auch am besten dann mit allem Explorer funktionieren.
Danke Schon einmal in vorraus.

BendOr

wenn du php zur verfügung stehen hast, würde ich das nehmen. das geht garaniert in allen browsern

Area51sbk

Hi!

php würde ich gere nehmen aber ich glaube das ich das nicht kann. Schon alleine weil meine kenntnisse sehr begrnzt sind. Gibt es eigentlich ein Programm wie Microsoft Office FrontPage nur für php?
Schau mal unter www. e34 - teile .de
Die Seite hat zur Zeit zu viel Java. möchte später einmal alles umschreiben. Aber erst einmal muss der grobe Aufbau fertig sein.

Lg

BendOr

also, ich wollte dir ja helfen
aber ich bin auf die seite gegenagen wo du das angeblich her hast und mein AV meldet nen trojaner & noch mehr
also auf ide seite geh ich nicht, ich bin nicht so der css-profi, machs einfahc nach der anleitung
javascript müsste ich mir uach alle funktionen zusammensuchen

in php ist das nicht sehr schwer

Area51sbk

WAAAASSSS!
Meiner meldet nicht! Habe auch einen Router vielleicht blockt der alles!
Du must mir aber glauben das ich das nicht wollt!

Kopiere das jetzt mal:

PHP

Per Zufall wechselnde Hintergrundgrafiken erzeugen


Eine kleine Spielerei mit Hintergrundgrafiken: Bei jedem Aufruf einer Seite ändert sich die Grafik. Um in der css-Datei php ausführen zu können muß diese mit der Endung .php gespeichert werden, also nicht style.css, sondern style.php. Damit sie aber als css-Datei erkannt wird, muß ganz zu Anfang Folgendes stehen:


<?php 
header("content-type: text/css");
 ?>


Und dieses ist der "Zufallsgenerator" für die unterschiedlichen Grafiken, der irgendwo, am besten auch gleich oben oder vorm Aufruf notiert wird:


<?php 
    $new[1] = "header0.jpg";
    $new[2] = "header1.jpg";
    $new[3] = "header2.jpg";
    $new[4] = "header3.jpg";
    $zufall = rand(1,4);
 ?>


Und so wird die Zufallsgrafik aufgerufen:


<?phpbackground: url(images/header) no-repeat;?>


Der Validator läßt sich übrigens ein U für ein X vormachen und validiert die style.php, die als css ausgegeben wird, einwandfrei :-)
Mehr Informationen unter: http://www.gabis-bloghaeuschen.de/?p=224

Alles anzeigen

Leider verstehe ich das nicht ganz. Warscheinlich kann ich das so auch nicht verwenden.
Kann ich dann später eigentlich mit php auch Inline-Popup einfügen?
Auf www. e34 - teile .de kannst Du aber drauf gehe da ist ganz sicher kein Virus oä. ist meine Seite!!!!!

Würde mich freuen wenn Du mir trotzdem hilfst!

Danke

Lg Henrik

Area51sbk

Achso gibt es eigentlich ein Programm wie Microsoft Office FrontPage nur für php?

BendOr

1. das programm das ich benutze : http://www.maguma.com

2. hier der code

also das ist erstmal die funktion, die kannst du oben in den quelltext einbauen, am besten ganz nach oben !

PHP

<?php
function random_pic() {
	$ordner = "./bilder/random";
	if($v = opendir($ordner)) {
	    $bilder = scandir($ordner);
	    $anzahl = count($bilder);
	    $bild = rand(0, $anzahl-1);
	    if($bilder[$bild] == "." || $bilder[$bild] == "..") {
	        return random_pic();
	    }
	    else {
	    return $bilder[$bild];
	    }
	}
	else {
	    if(is_file($ordner."/".$bilder[0])) {
	        return $bilder[0];
	    }
	    else {
	        return false;
	    }
	}
}
?>

Alles anzeigen

dann brauchst du die funktion nur noch da aufrufen, wo du die haben willst, also bei dir im body tag

Code

<body style="background-image: url('bilder/random/<?=random_pic();?>')">

die bilder liegen in diesem beispiel im unterordner bilder/random
das kannst du aber auch ändern, du musst nur über all wo bilder/random/ steht dieses ersetzen

das scripts liest die bilder automatisch aus dem ordner aus !

Area51sbk

Hi!

Also irgendwie klappt das noch nicht!
Vielleicht habe ich auch etwas falsch verstanden.
Also mein Code ist:

PHP

<?php 
function random_pic() { 
   $ordner = "./bilder/random"; 
   if($v = opendir($ordner)) { 
       $bilder = scandir($ordner); 
       $anzahl = count($bilder); 
       $bild = rand(0, $anzahl-1); 
       if($bilder[$bild] == "." || $bilder[$bild] == "..") { 
           return random_pic(); 
       } 
       else { 
       return $bilder[$bild]; 
       } 
   } 
   else { 
       if(is_file($ordner."/".$bilder[0])) { 
           return $bilder[0]; 
       } 
       else { 
           return false; 
       } 
   } 
} 
?>


<html>


<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
<title>www.e34-teile.de</title>






<script language="JavaScript"> 
<!-- 
var message=""; 
function clickIE() {if (document.all) {(message);return false;}} 
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) { 
if (e.which==2||e.which==3) {(message);return false;}}} 
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} 
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} 


function disableselect(e){ 
return false 
} 
function reEnable(){ 
return true 
} 
document.onselectstart=new Function ("return false") 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 
} 


function scrollit_r2(seed)
{
  var m1  = " Herzlich Willkommen auf e34-teile.de                                                                              ";
  var m2  = "                                                 Tragen Sie zur Verbesserung bei und schreiben Sie uns ihre Meinung";
  var msg=m1+m2;
  var out = " ";
  var c   = 1;
  if (seed > 100)
	 {
          seed--;
          var cmd="scrollit_r2(" + seed + ")";
          timerTwo=window.setTimeout(cmd,50);
	 }
    	 else if (seed <= 100 && seed > 0)
		 {
	  	  for (c=0 ; c < seed ; c++)
		      {
        	  	out+=" ";
		      }
  		  out+=msg;
		  seed--;
		  var cmd="scrollit_r2(" + seed + ")";
  		  window.status=out;
  		  timerTwo=window.setTimeout(cmd,100);
 		 }
    		  else if (seed <= 0)
			 {
           		  if (-seed < msg.length)
			    {
                	     out+=msg.substring(-seed,msg.length);
                	     seed--;
                	     var cmd="scrollit_r2(" + seed + ")";
                             window.status=out;
                	     timerTwo=window.setTimeout(cmd,100);
      			    }
            		     else
				 {
                		   window.status=" ";
                		   timerTwo=window.setTimeout("scrollit_r2(100)",45);
		                 }
      			 }
}
// -->
</script>
</head>


<body bgcolor="#000000" text="#FFFFFF" link="#C0C0C0" vlink="#808080" alink="#FFFFFF" onload="timerONE=window.setTimeout('scrollit_r2(100)',500);" style="background-image: url('bilder/random/%3C?=random_pic(')">


<base target="rechts">




<p align="center"><a href="http://www.e34-teile.de" target="_blank">
[img]e34-teilebanner.jpg[/img]</a>




















</p>




</p>
<p align="center">Auf dieser Seite soll in naher Zukunft nicht nur für das e34.de 
Forum Teile bestellt werden können, sondern man soll auch sehen, wie man sein Auto 
auf Öl (Dieselmotor) oder Gas (Benzinmotor) umbauen kann. Wenn Sie Ihren Umbau auf 
dieser Seite vorstellen wollen, so können Sie mir diesen schicken.</p>




<p align="center">Damit diese Seite verbessert werden kann, sind die Erbauer dieser 
Seite auf Ihre Hilfe angewiesen. Daher würden wir uns freuen wenn Sie uns Ihre Verbesserungsvorschläge 
per E-Mail mitteilen. </p>








<p align="center">Bitte beachten Sie, dass zur Zeit die Seite nur mit dem Internet 
Explorer funktioniert. Wir arbeiten gerade an einer verbesserten Version. Das neue 
Update kann allerdings noch einige Zeit dauern, da uns die Zeit für die Überarbeitung 
fehlt. Für angebotene Hilfe und Vorschläge sind wir natürlich immer dankbar.</p>








<p align="center"><font size="1">Diese Seite ist durch einen Aufruf im E34-Forum 
entstanden.</font></p>
<p align="center">
<a href="javascript:self.print()" onmouseover="status='www.e34-teile.de'; return true;" onmouseout="status='www.e34-teile.de';" target="_self" style="text-decoration: none">
Seite drucken</a></p>


</body>


</html>

Alles anzeigen

Was ist jetzt falsch?

Achso vergessen:

PHP

<?php 
function random_pic() { 
   $ordner = "./bilder/random"; 
   if($v = opendir($ordner)) { 
       $bilder = scandir($ordner); 
       $anzahl = count($bilder); 
       $bild = rand(0, $anzahl-1); 
       if($bilder[$bild] == "." || $bilder[$bild] == "..") { 
           return random_pic(); 
       } 
       else { 
       return $bilder[$bild]; 
       } 
   } 
   else { 
       if(is_file($ordner."/".$bilder[0])) { 
           return $bilder[0]; 
       } 
       else { 
           return false; 
       } 
   } 
} 
?>

Alles anzeigen

Das habe ich auch schon über Java usw eingefügt.
Habe auch zwei Ordner erstellt: bilder\random\(eingefügte Bilder)

Lg Henrik

BendOr

ok
diese zeile ist falsch:
style="background-image: url('bilder/random/%3C?=random_pic(')">

das sollte so sein:

style="background-image: url('bilder/random/<?=random_pic(); ?>')">

Area51sbk

Hi!

Also irgendwie funktioniert das immer noch nicht! Habe es mit IE ausprobiert.
Habe das jetzt einmal unter http://www.e34-teile.de/e34/versuch.html geöffnet!
Hoffentlich bekommen wir das noch hin!

@chris90n...
Du hast recht mit dem Wort Java gehe ich leichtfertig um aber ich habe gelernt das Java nicht unbedingt gut ist.

Melde mich jetzt erst da ich meinen Rechner formatiert hatte. Hatte jetzt meine Seite einmal mit Opera angeschaut. Sagen wir einfach, dass ich mir nur die Startseite anschauen konnt! Da muss ich noch einiges umbauen.

Lg Henrik

Area51sbk

Also jetzt ist mir etwas komisches aufgefallen!

PHP

<?php 
function random_pic() { 
   $ordner = "./bilder/random"; 
   if($v = opendir($ordner)) { 
       $bilder = scandir($ordner); 
       $anzahl = count($bilder); 
       $bild = rand(0, $anzahl-1); 
       if($bilder[$bild] == "." || $bilder[$bild] == "..") { 
           return random_pic(); 
       } 
       else { 
       return $bilder[$bild]; 
       } 
   } 
   else { 
       if(is_file($ordner."/".$bilder[0])) { 
           return $bilder[0]; 
       } 
       else { 
           return false; 
       } 
   } 
} 
?> 


<html> 


<head> 
<meta http-equiv="Content-Language" content="de"> 
<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)"> 
<meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)"> 
<title>www.e34-teile.de</title> 






<script language="JavaScript"> 
<!-- 
var message=""; 
function clickIE() {if (document.all) {(message);return false;}} 
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) { 
if (e.which==2||e.which==3) {(message);return false;}}} 
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} 
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} 


function disableselect(e){ 
return false 
} 
function reEnable(){ 
return true 
} 
document.onselectstart=new Function ("return false") 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 
} 


function scrollit_r2(seed) 
{ 
  var m1  = " Herzlich Willkommen auf e34-teile.de                                                                              "; 
  var m2  = "                                                 Tragen Sie zur Verbesserung bei und schreiben Sie uns ihre Meinung"; 
  var msg=m1+m2; 
  var out = " "; 
  var c   = 1; 
  if (seed > 100) 
    { 
          seed--; 
          var cmd="scrollit_r2(" + seed + ")"; 
          timerTwo=window.setTimeout(cmd,50); 
    } 
        else if (seed <= 100 && seed > 0) 
       { 
          for (c=0 ; c < seed ; c++) 
            { 
                out+=" "; 
            } 
          out+=msg; 
        seed--; 
        var cmd="scrollit_r2(" + seed + ")"; 
          window.status=out; 
          timerTwo=window.setTimeout(cmd,100); 
        } 
            else if (seed <= 0) 
          { 
                   if (-seed < msg.length) 
             { 
                        out+=msg.substring(-seed,msg.length); 
                        seed--; 
                        var cmd="scrollit_r2(" + seed + ")"; 
                             window.status=out; 
                        timerTwo=window.setTimeout(cmd,100); 
                   } 
                       else 
             { 
                         window.status=" "; 
                         timerTwo=window.setTimeout("scrollit_r2(100)",45); 
                       } 
                } 
} 
// --> 
</script> 
</head> 


<body bgcolor="#000000" text="#FFFFFF" link="#C0C0C0" vlink="#808080" alink="#FFFFFF" onload="timerONE=window.setTimeout('scrollit_r2(100)',500);" style="background-image: url('bilder/random/%3C?=random_pic(')">                       


<base target="rechts"> 


 
<p align="center"><a href="http://www.e34-teile.de" target="_blank"> 
[img]e34-teilebanner.jpg[/img]</a> 


 


 


 


 


 
</p> 




</p> 
<p align="center">Auf dieser Seite soll in naher Zukunft nicht nur für das e34.de 
Forum Teile bestellt werden können, sondern man soll auch sehen, wie man sein Auto 
auf Öl (Dieselmotor) oder Gas (Benzinmotor) umbauen kann. Wenn Sie Ihren Umbau auf 
dieser Seite vorstellen wollen, so können Sie mir diesen schicken.</p> 


 
<p align="center">Damit diese Seite verbessert werden kann, sind die Erbauer dieser 
Seite auf Ihre Hilfe angewiesen. Daher würden wir uns freuen wenn Sie uns Ihre Verbesserungsvorschläge 
per E-Mail mitteilen. </p> 


 


 
<p align="center">Bitte beachten Sie, dass zur Zeit die Seite nur mit dem Internet 
Explorer funktioniert. Wir arbeiten gerade an einer verbesserten Version. Das neue 
Update kann allerdings noch einige Zeit dauern, da uns die Zeit für die Überarbeitung 
fehlt. Für angebotene Hilfe und Vorschläge sind wir natürlich immer dankbar.</p> 


 


 
<p align="center"><font size="1">Diese Seite ist durch einen Aufruf im E34-Forum 
entstanden.</font></p> 
<p align="center"> 
<a href="javascript:self.print()" onmouseover="status='www.e34-teile.de'; return true;" onmouseout="status='www.e34-teile.de';" target="_self" style="text-decoration: none"> 
Seite drucken</a></p> 


</body> 


</html>

Alles anzeigen

Also mein MS FrontPage ändert automatisch das so

Code

style="background-image: url('bilder/random/%3C?=random_pic(')">

ab.

Habe jetzt einmal im Quelltext auf der Seite dirkt dieses geändert!
Also einmal
http://www.e34-teile.de/e34/versuch2.html
und
http://www.e34-teile.de/e34/versuch.html

Leider noch kein Erfolg!

Hoffentlich bekommen wir das noch hin!

Lg Henrik Danke für eure Hilfe!!!!!

phpfan

1. Schmeiß' dein Frontpage weg, ist sowieso Schrott
2. Die Datei mit die Extension .php haben
3. Es muss PHP installiert sein

phpfan

chris90night

Mir fällt da was auf, im erstn Teil des Codes kommt eine If-Funktion, darauf folgt die Ausweichbedingung (else), aber dann kommt noch 2-3 mal else.
Das geht nicht, else kann nur einmal pro if-Bedingung vorkommen.
Für solche mehreren else-Ausweichungen gibt es den Begriff elseif ....

BendOr

meine php funktion ist richtig !
schon klar dass man da elseif einsezten MÜSSTE, aber wenn du mal genau hinsiehst, entdeckst du noch mehr if's, beachte eifach ma die klammern
frontpage hatte nur die php-klammer geändert, er hatte noch altes php und bruachte somit die scandir-funktion & die datei musste *.php heissen
ist alles erledigt

Per Zufall wechselnde Hintergrundgrafiken erzeugen mit css

Tags

Benutzer online in diesem Thema