# Bilderwechsel bei Seitenaufruf



## mkca (6. Okt 2010)

Hallo! 

Ich bin neu hier.....

Ich möchte gerne ein Skipt realisieren, daß bei jedem neuen Seitenaufruf der Webseite ein anderes Bild angezeigt wird. Ich habe dazu im Internet folgende zwei Skripte gefunden. Beide funktionieren auch! 

Der besseren Übersicht möchte ich meine Bilder aber in einem Unterordner verwalten. Wie kann ich im Skript den Zugriff auf einen Unterorder ermöglichen? 

Welches ist eurer Meinung das Bessere oder elegantere Skript?  Oder gibt es andere Vorschläge für ein Skript?

Freue mich auf eure Antworten. Danke!


Skipt 1:


```
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<SCRIPT LANGUAGE="JavaScript">

var Pic = new Array() 

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'
Pic[12] = '13.jpg'
Pic[13] = '14.jpg'
Pic[14] = '15.jpg'

var j = 0
var p = Pic.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = Pic[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+Pic[whichImage]+'">');
}

</script>

</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

showImage();

</script>

</body>
</html>
```

Skript 2:


```
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script language="JavaScript"> 
 
   var anzahl = 15; 
   var nummer = Math.random() ; 
   var txt = Math.round( (anzahl-1) *  nummer) + 1 ; 
   image = new Array 
   image[1] = "1.jpg"; 
   image[2] = "2.jpg"; 
   image[3] = "3.jpg"; 
   image[4] = "4.jpg"; 
   image[5] = "5.jpg"; 
   image[6] = "6.jpg"; 
   image[7] = "7.jpg";
   image[8] = "8.jpg";   
   image[9] = "9.jpg";   
   image[10] = "10.jpg";
   image[11] = "11.jpg";   
   image[12] = "12.jpg";
   image[13] = "13.jpg";
   image[14] = "14.jpg";
   image[15] = "15.jpg";
   
   var showimage = image[txt]; 
    
   document.write("<img border='0' src='" + showimage + "' alt='' />") 
 
</script>


</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

showImage();
</script>

</body>
</html>
```


----------



## L-ectron-X (6. Okt 2010)

Ich weiß nicht viel von JavaScript. Aber im Prinzip musst du das src-Attribut um einen relativen Pfad erweitern.


----------



## Runtime (7. Okt 2010)

D. h.:

```
<img src="dein-Ordner/dein-bild.png"
```


----------



## mkca (7. Okt 2010)

Vielen Dank für den Code! Ich habe es versucht, funktioniert aber nicht. 

Ich weiß ich nicht, wo ich genau den <img src="dein-Ordner/dein-bild.png” einbinden soll. 
Und in dem Unterverzeichnis sollen mehrere Bilder liegen – wie kann auf diese zugegriffen werden?

Freue mich auf eure Antworten. Wie gesagt, ich bin Anfänger....

Beste Grüße


----------



## Runtime (7. Okt 2010)

Das wäre der HTML-Code. dein-Ordner wäre der Unterordner für deine Bilder und dein-bild.png wäre das Bild, das du laden möchtest.


----------



## Tomate_Salat (7. Okt 2010)

Hat mich interessiert: folgende Struktur:

```
- demo.html
- [img]http://www.java-forum.org/fuer-verirrte-fragen-javascript/ <-- Ordner
     |- a.jpg
     |- b.jpg
     |- ...
```

so schaut die demo.html aus:

```
<html>
<head>
<script>
// Configuration
var delay  = 1000;                                       // Zeit bis neues Bild angezeigt wird
var images = new Array("a.jpg","b.jpg","c.jpg","d.jpg"); // Hier die Bilnamen eingeben
var source = "img/";                                     // Der Ordner, der die bilder enthält

// Ab hier nichts mehr Ändern
var zahl;

function loaded() 
{ 
  zahl   = parseInt(Math.random() * (images.length));
  
  document.getElementById("image").src = source + images[zahl];
  
  window.setTimeout("timer()", parseInt(delay));
}

function timer() 
{
  zahl  = parseInt((zahl + 1) % images.length);

  document.getElementById("image").src = source + images[zahl];

  window.setTimeout("timer()", parseInt(delay));
}

</script>
</head>
<body onload="loaded()">
<img src="" alt="Fehler im Script" width="300px" height="300px" id="image" />
</body>
</html>
```

das ganze hat jz noch eine random-funktion.wenn du die nicht willst, entferne die funktion [c]time();[/c] und lösche die zeile mit [c]window.setTimeout...[/c] in der Funktion [c]loaded()[/c]

MFG

Tomate_Salat


----------

