# JavaScript, um Zufallsbilder anzeigen zu lassen?



## Rayne (27. Januar 2006)

Hi Leute!

Ich benötige ein Script, welches mir aus einer Fülle von Bildern immer durch Zufall eines auswählt und es anzeigt.

Ich habe zwar bereits eins gefunden ( LINK )und es funktioniert auch einwandfrei, jedoch muss man hier jedes Bild in das Script eintragen, was bei einer großen Anzahl an Bildern umständlich ist.
Besser wäre es, wenn ich nur den Bilderordner angeben müsste und das Script greift dann von alleine auf die darin enthaltenen Bilder zu.

Auch über Google habe ich solche Scripts nicht gefunden.

Jetzt liegt die Vermutung nahe, dass es mit JavaScript gar nicht geht, sondern hier wohl PHP die richtige Anlaufstelle wäre   

Oder kennt ihr doch eine Möglichkeit, das Ganze mit einem JavaScript zu bewerkstelligen?

Vielen Dank! 

Rayne


----------



## marky68 (27. Januar 2006)

Rayne am 27.01.2006 13:11 schrieb:
			
		

> Hi Leute!
> 
> Ich benötige ein Script, welches mir aus einer Fülle von Bildern immer durch Zufall eines auswählt und es anzeigt.
> 
> ...



hallo,
zuerst, bitte mal den thread verschieben 
wie du schon richtig bemerkt hast, ist das was du willst mit javascript nicht moeglich. javascript ist eine clientseitige scriptsprache, der es nicht moeglich ist, auf dateisysteme, sei es dem des servers oder des clients, zuzugreifen. als wuergaround koennte man zum einen die dateiliste mit einer serverseitigen scriptsprache, zB. php, generieren:

```
var Images = new Array(
<?
$handle = opendir("dir/");
while (FALSE !== ($entry = readdir($handle))) {
 if ($entry != "." && $entry != "..") {
  echo '"'.$entry.'";';
 }
}
?>
);
```
oder andererseits, was vielleicht sinnvoller waere und zudem von den browsereinstellungen des clients unabhaengig, die "zufaelligkeitslogik"  in zB. php realisieren:

```
<img src='<?
$arr = array();
$handle = opendir("dir/");
while (FALSE !== ($entry = readdir($handle))) {
 if ($entry != "." && $entry != "..") {
  $arr[] = $entry;
 }
}
$rand = mt_rand(0,(count($arr)-1));
echo $arr[$rand];
?>' ... />
```
ausserdem koennte man noch einen dateiendungsfilter einbauen...

```
$exts = array("jpg","png","gif");
$arrF = explode(".",$entry);
$ext = array_pop($arrF);
if (in_array($ext,$exts)) {
 // ...
}
```

viel spass


----------



## Rayne (27. Januar 2006)

@ marky68: Vielen Dank für deine detaillierte Antwort 

Aber es hatte schon seinen Grund, warum ich nach JavaScript gefragt habe, da mein Server-Tarif leider kein PHP unterstützt 

Was bewirkt eigentlich dieser Dateiendungsfilter?
Ist es dem "Zufallsgenerator" nicht egal, welches Bild (ob JPG, GIF etc.) er holt?

Na gut, dann muss ich mir halt die Mühe machen und jedes Bild eintippen, oder...hm...vielleicht diesen PHP-Zufallsgenerator auf Funpic hosten  :-o 

Danke!

Rayne


----------



## marky68 (29. Januar 2006)

Rayne am 27.01.2006 15:17 schrieb:
			
		

> @ marky68: Vielen Dank für deine detaillierte Antwort
> 
> Aber es hatte schon seinen Grund, warum ich nach JavaScript gefragt habe, da mein Server-Tarif leider kein PHP unterstützt
> 
> ...



hallo rayne, 
kein problem 
den dateiendungsfilter hatte ich nur noch gezeigt, falls du noch andere dateien als bilder im verzeichnis hast..
wenn dein server kein php unterstuetzt, ist es in der tat das einfachste, das skript auf zB. funpic auszulagern, das das javascript generieren zu lassen und dieses dann in der anderen seite einzubinden..

```
// JS...
var Images = new Array(
<?
$handle = opendir("dir/");
while (FALSE !== ($entry = readdir($handle))) {
 if ($entry != "." && $entry != "..") {
  echo '"'.$entry.'";';
 }
}
?>
);
// JS...
```
als php skript
und dann in den head von der eigentlichen seite

```
<script src="http://funpic.de/meinphpskript.php" 
 type="text/javascript"></script>
...
<body onLoad='RotatePic()' ... >
```

das muesste eigentlich gehen..


----------



## modderfreak (30. Januar 2006)

sowas hab ich auch schon gesucht, aber ich hab ka wie ich die PHP oder Javascripte integrieren soll   

das einzige was ich verstehe und wo ich mitreden kann: das auslagern auf FunPic klingt vielleicht im ersten Moment gut, nur wird dann, zb falls man das als rotierender Banner einsetzen will (wie ich es vorhabe), das Bild sicher mit Werbung verdeckt


----------



## Flixus (30. Januar 2006)

mit

<?php
hier php code
?>

kannst du an jeder beliebigen stelle auf deiner Seite php ausgeben insofern der server php unterstützt, die datei sollte auch mit .php enden...

mit php wie schon gezeigt kann man sehr einfach Bilderwechsel bzw Zufälle generieren ohne das javascript benötigt wird, man soll ja mal wegkommen von javascript, manche blocken das auch...

MfG Flixus


----------



## modderfreak (30. Januar 2006)

ok danke, jetz habe ich nur noch ein problem: ich habe das Bild, was ich rotieren will (Banner) als Hintergrund einer Tabelle drin, da funzt das Javascript irgendwie nicht    
Das PHP-Script ist auch nicht darauf ausgelegt das Bild im Tabellenhintergrund zu rotieren, was lässt sich da machen?  
(-ich habe schon versucht das Bild im Vordergrund, also einfach mit dem img tag wie sonst auch reinzugeben, aber ich müsste dazu alle Banner verkleinern und das geht sehr schlecht aufgrund des Designs des Banners)


----------



## Flixus (31. Januar 2006)

modderfreak am 30.01.2006 18:48 schrieb:
			
		

> da funzt das Javascript irgendwie nicht



soll das Banner immer wechseln oder nur beim aktuallisieren der Seite?

MfG Alex

EDIT: Du hast glaube auch 2mal den <body> tag am anfang drin...mach da einfach den 2. <body...weg und das-> onload="RotatePic()" mit in den oberen wo das mit den links steht rein...


----------



## modderfreak (6. Februar 2006)

Flixus am 31.01.2006 00:57 schrieb:
			
		

> modderfreak am 30.01.2006 18:48 schrieb:
> 
> 
> 
> ...


erm..ka wie du das immer meinst, aber ich hab halt gedacht dass es wechselt wenn man die seite aktualisiert, oder auf eine andere geht etc.
des liegt net am 2mal body tag, den hab ich eh nur 1 mal drinnen, der code vom bild als Hintergrund der Tabelle (die seite besteht aus tabellen) sieht so aus:

<td width="775" background="header-center.jpg" height="99" bgcolor="#FF6600" rowspan="2" colspan="5">

-da einfach das Javascript-zeug dazukopiern funzt net, aber wenn ich das Bild normal einfügen würde schon, nur wird dann die "architektur" der webseite zerstört.


----------



## marky68 (7. Februar 2006)

modderfreak am 06.02.2006 17:06 schrieb:
			
		

> <td width="775" background="header-center.jpg" height="99" bgcolor="#FF6600" rowspan="2" colspan="5" *name='random'*>



schon probiert?


----------



## modderfreak (7. Februar 2006)

marky68 am 07.02.2006 14:42 schrieb:
			
		

> modderfreak am 06.02.2006 17:06 schrieb:
> 
> 
> 
> ...


jep, ebn das funzt net


----------



## marky68 (7. Februar 2006)

modderfreak am 07.02.2006 16:37 schrieb:
			
		

> jep, ebn das funzt net



hallo,
natuerlich, ist ja auch voellig klar. das javascript arbeitet mit dem Array images, worin alle bilder des dokumentes (<img ... />) enthalten sind. wenn du ein td tag benutzt, trifft das natuerlich nicht zu. funktionieren wuerde hier:
<td background='...' id='...'>...</td>

//document.images[imageTDTagID].src=ri; 
document.getElementById("random").background=ri;

das if (document.images) kann man sich dann natuerlich auch sparen.


----------



## modderfreak (8. Februar 2006)

marky68 am 07.02.2006 17:30 schrieb:
			
		

> modderfreak am 07.02.2006 16:37 schrieb:
> 
> 
> 
> ...


erm...ich bin bei sowas kompletter Noob (  ), wie muss ich was wo eintragen?
-Was kommt in den Body-Tag, was in den Head?


----------



## marky68 (9. Februar 2006)

modderfreak am 08.02.2006 18:59 schrieb:
			
		

> marky68 am 07.02.2006 17:30 schrieb:
> 
> 
> 
> ...





```
<script language="JavaScript" type="text/javascript"> 
<!--
function RotatePic() {
var ImageTDTagID = "random";
var Images = new Array(
"images/pic_1.gif", 
"images/pic_2.gif",
"images/pic_3.gif"
); 
RandImage = Math.round(Math.random()*Images.length);
if( Images.length == RandImage ) RandImage = 0; 
ri = Images[RandImage]; 
//document.images[imageTDTagID].src=ri; 
document.getElementById(ImageTDTagID).background=ri;
} 
//--> 
</script>
```
in den head


```
<td background='...' id='...'>...</td>
```
dann halt irgendwo hin..


----------



## modderfreak (9. Februar 2006)

aha! gleich probiern  
EDIT: also ich habe jetz das Scipt reinkopiert, die Namen der Bilder geändert etc und der Tabellen-Teil schaut jetz so aus:

<td width="775" background="header/header1.jpg" id="random" height="99" bgcolor="#FF6600" rowspan="2" colspan="5">
<p align="center"> </td>

-funzt aba noch imma net


----------



## modderfreak (12. Februar 2006)

modderfreak am 09.02.2006 14:41 schrieb:
			
		

> aha! gleich probiern
> EDIT: also ich habe jetz das Scipt reinkopiert, die Namen der Bilder geändert etc und der Tabellen-Teil schaut jetz so aus:
> 
> <td width="775" background="header/header1.jpg" id="random" height="99" bgcolor="#FF6600" rowspan="2" colspan="5">
> ...


mhm weiss wer rat?


----------



## sLost (12. Februar 2006)

was soll das   //   vor dem document.images....... ???

//document.images[imageTDTagID].src=ri; document.getElementById(ImageTDTagID).background=ri;


----------



## modderfreak (12. Februar 2006)

sLost am 12.02.2006 18:23 schrieb:
			
		

> was soll das   //   vor dem document.images....... ???
> 
> //document.images[imageTDTagID].src=ri; document.getElementById(ImageTDTagID).background=ri;


da er es im original-layout vom script ne neue zeile dafür genommen hat nehme ich an er wollte dass der erste teil ignoriert wird (document.images[imageTDTagID].src=ri und erst der zweite für die Bilder-ID hergenommen wird (document.getElementById(ImageTDTagID).background=ri - er hätte es genauso gut löschen können, aber egal wie ich mich mit dem script spiele, ich bekomm es einfach nicht hin dass das Bild ausgetauscht wird


----------



## marky68 (12. Februar 2006)

hallo,
das // kommentiert diese zeile aus, d.h. sie wird nicht beachtet, ich hatte sie dringelassen, um den unterschied zu demonstrieren 

zum problem: es sieht so aus, dass der IE6 mit dem aendern des background attributs zurechtkommt, nicht aber opera und firefox. wenn man das hintergrundbild ueber css definiert ( background:url(bild.gif); ) und das skript entsprechend aendert, geht das ganze in allen drei browsern.
hier nun ein schlussendlich funktionierender code (mit deinem TD tag, nur um das style attribut erweitert):


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; 
    charset=iso-8859-1" />
  <script language="JavaScript" type="text/javascript"> 
<!--
function RotatePic() {
var ImageTDTagID = "random";
var Images = new Array(
"nachher.gif", 
"valid-xhtml.png",
"valid-css.png"
); 
RandImage = Math.round(Math.random()*Images.length);
if( Images.length == RandImage ) RandImage = 0; 
ri = Images[RandImage]; 
document.getElementById("random").style.background="url("+ri+")";
} 
//--> 
</script>
 </head>
 <body onLoad='rotatePic()'>
  <table><tr>
  <td style='background:url(vorher.gif)' id='random' width="775"
 height="99" bgcolor="#FF6600" rowspan="2" colspan="5">
BlaBlaBlaBla<br />BlaBlaBla </td> 
  </tr></table>
  <a href='javascript:RotatePic()'>rotatePic</a>
 </body>
</html>
```


----------



## sLost (13. Februar 2006)

Diese Zeile hat mich komplett verwirrt. Ich mach in meine Scripts eigentlich nie kommentare, weil ich mich ja in meinen eigenen Scripts eigentlich auch so auskennen sollte. 

Jetzt hab ich aber noch eine Frage zu einem Thema was mich jedes Mal wieder nervt:

Ich habe eine Funktion:
function hidevalue(objname)
{
window.document.objname.value = "";
}

Im Body steht jetzt:
<input type="text" value="BlaBal" name="feldeins" onClick="hideuser(feldeins)">
<input type="text" value="BlaBal" name="feldzwei" onClick="hideuser(feldzwei)">

eigentlich müsste doch dann in der Function das "objname" mit "feldeins" bzw. "feldzwei" ersetzt werden. Das funzt aber nicht. Was mach ich da falsch ??


----------



## BigStyla (14. Februar 2006)

ich weis nid ob man das scho erwähnt hat, aber geh mal auf

http://www.dreamcodes.de

dort gibts einige geile codes


----------



## marky68 (14. Februar 2006)

sLost am 13.02.2006 16:34 schrieb:
			
		

> Ich habe eine Funktion:
> function hidevalue(objname)
> {
> window.document.objname.value = "";
> ...



hier wird versucht, an die funktion den wert der variable feldeins bzw. feldzwei zu uebergeben, die es ja nicht gibt. also muesstest du das quoten, da es ja ein string sein soll 

also zB. so:

```
<script type="text/javascript">function hidevalue(objname)
{
//window.document.objname.value = "";
document.getElementById(objname).value = '';
}

</script>

<input type="text" value="BlaBal" id="feldeins" 
onClick="hidevalue('feldeins')">
<input type="text" value="BlaBal" id="feldzwei" 
onClick="hidevalue('feldzwei')">
```


----------



## sLost (15. Februar 2006)

marky68 am 14.02.2006 15:22 schrieb:
			
		

> hier wird versucht, an die funktion den wert der variable feldeins bzw. feldzwei zu uebergeben, die es ja nicht gibt. also muesstest du das quoten, da es ja ein string sein soll
> 
> also zB. so:
> 
> ...



ah ja danke. 
Mit //window.document.objname.value = ""; hat es nichts funktioniert, aber mit getelementbyid. Liegt das daran, dass es sich um Forumularelemente handelt ??


----------



## marky68 (15. Februar 2006)

du kannst das formularfeld entweder per document.getElementById() erreichen, wenn es ueber das attribut id verfuegt, oder ueber das formular, dazu muessen sowohl formular als auch feld ein name attribut haben.
also

```
<form name='Formular'><input name='Feld' value='Test' type='text' /></form>
```


```
... 
document.Formular.Feld.value = '';
...
```


----------

