JavaScript, um Zufallsbilder anzeigen zu lassen?

[Rayne]

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]

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

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]

@ 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]

@ 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

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]

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]

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]

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]

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]

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...

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]

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

schon probiert?

 

[modderfreak]

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

schon probiert?

jep, ebn das funzt net

 

[marky68]

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]

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.

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

 

[marky68]

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.

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

<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]

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]

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

mhm weiss wer rat?

 

[sLost]

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

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

 

[modderfreak]

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]

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]

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 ??