Hilfe bei Script für wechselnde Bilder.

**Seelenzucker** · 04.09.2008 20:15

Ich habe eine kurze Frage, muss aber zu Anfang sagen, dass ich mich nur ein kleines bisschen mit HTML auskenne, sonst aber von nichts ne Ahnung habe, also könnte es sein, dass mein Anliegen völlig unrealisierbar ist und total dumm.

Nur so als Vorwarnung.

Mein Problem ist nun folgendes:
Ich versuche mich gerade an einem neuen Layout für ein Forum und hätte anstelle eines einzelnen wechselnden Headerbildes gerne drei verschiedene. Also nicht drei verschiedene Bilder die sich abwechseln, sondern drei verschiedene wechselnde Bilder nebeneinander.

Code:

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] =''

// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>

Das ist der Code den wir bis jetzt verwendet haben. Ein zweiteiliger. Das Gegenstück ist folgendes:

Code:

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================
showImage();
//-->
</script>

Versuchen tue ich, dass das ganze am Ende so aussieht: http://img511.imageshack.us/img511/2138/header2hj1.jpg
Also, die drei Bilder unabhängig voneinander gewechselt werden, wobei Rechts weibliche, Links männliche und in der Mitte Gegenstände und Landschaften abgebildet werden sollen. Das tut natürlich nciht wirklich etwas zur Sache, ist aber glaube ich wichtig um zu verstehen was ich mir vorstelle.
Ich weiß nicht, ob es überhaupt verständlich war, ich hoffe allerdings dass mich jemand verstanden hat und mir jemand helfen kann, dass wäre echt super!

**theo** · 05.09.2008 11:35

Zitat von Seelenzucker

Ich habe eine kurze Frage, muss aber zu Anfang sagen, dass ich mich nur ein kleines bisschen mit HTML auskenne, sonst aber von nichts ne Ahnung habe, also könnte es sein, dass mein Anliegen völlig unrealisierbar ist und total dumm.

Nur so als Vorwarnung.

realisierbar ist prinzipiell fast alles. aber wenn das stimmt, was du geschrieben hast, dann koennte es fuer dich etwas problematisch werden. nur so als vorwarnung

in anbetracht deines textes hab ich hier mal eine q&d-loesung geschrieben. sieh mal, ob du damit schon was anfangen kannst ...

PHP-Code:


<?php



$dir = "../images/";



$handle = opendir($dir);

$x=0;

while($file = readdir($handle)){

    if(preg_match("/^.*\.(jpg|png|gif|bmp)$/iU", $file)){

        $leftImages.= sprintf("leftImages[%s] = \"%s\";\n\r", $x, $dir.$file);

        $middleImages.= sprintf("middleImages[%s] = \"%s\";\n\r", $x, $dir.$file);

        $rightImages.= sprintf("rightImages[%s] = \"%s\";\n\r", $x, $dir.$file);        

        $x++;

    }

} // end while

closedir($handle);



?>

<!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>image-scrabble</title>

    <script language="JavaScript">

        var leftImages     = new Array();

        <?php echo $leftImages; ?>

        

        var middleImages = new Array();

        <?php echo $middleImages; ?>

        

        var rightImages = new Array();

        <?php echo $rightImages; ?>

        

        var x = leftImages.length;

        var y = middleImages.length;

        var z = rightImages.length;

        

        /*var preBuffer = new Array()

        for(var i = 0; i < p; i++){

           preBuffer[i] = new Image();

           preBuffer[i].src = leftImages[i];

        }*/

        

        var image1 = Math.round(Math.random()*(x-1));

        var image2 = Math.round(Math.random()*(y-1));

        var image3 = Math.round(Math.random()*(z-1));

        

        function showImage(){

            document.getElementById('left').innerHTML = '<img src="'+leftImages[image1]+'" alt=".">';

            document.getElementById('middle').innerHTML = '<img src="'+leftImages[image2]+'" alt=".">';

            document.getElementById('right').innerHTML = '<img src="'+leftImages[image3]+'" alt=".">';

        }

        

        window.onload = function(){

            showImage();

        }

        //-->

    </script>

    </head>    

    <body>

        <div id="head">

            <div id="left"></div>

            <div id="middle"></div>

            <div id="right"></div>

        </div>

    </body>

</html>

**Seelenzucker** · 05.09.2008 17:18

Ich muss zugeben, dass mich der Code gerade etwas überfordert. Ich weiß gar nicht wo ich was wie einfügen soll.

Wo z.B. werden URLs der Bilder eingetragen und wie füge ich das ganze am Ende in die Seite ein? Wie gesagt, irgendwie überfordert mich das gerade. Aber danke trotzdem schonmal, dass du dir die mühe gemacht hast.

**theo** · 05.09.2008 19:52

oje ... ich hatte sowas geahnt. ich hatte eben nur gehofft, dass es nicht so schlimm waere

aaalso ... der erste teil mit php dient lediglich dazu, spaeter die arrays mit den bildnamen zu fuellen.

verzeichnis, in dem die bilder liegen, an ein eine variable uebergeben (bei dir muessten das dann verschiedene sein ... falls du das script anpassen wolltest)
verzeichnis oeffnen
in einer while-schleife die dateien, die im angegebenen verzeichnis gefunden wurden, auslesen und nur die bilddateien an eine variable ueber geben (in diesem fall 3 verschiedene)
normale html datei aufbauen und im header ein javascript einfuegen, das den bildwechsel uebernimmt
arrays anlegen und die daten aus den php-variablen uebergeben ... fertsch!
der rest wird dann von dem script uebernommen (leicht verfaelscht ), das du gepostet hattest

so. die kleinen anpassungen ... naja ... fuer die 3 felder eben. und die koennen eben nur angesteuert werden, wenn sie auch da sind. daher das onload.
sonst noch fragen?

**Seelenzucker** · 05.09.2008 21:28

Nein, aber danke für die Hilfe.

zur Startseite vom TP

Thema: Hilfe bei Script für wechselnde Bilder.

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hilfe bei Script für wechselnde Bilder.

Ähnliche Themen

Wie baue ich täglich wechselnde Bilder in Go Live ein?

Nach Tageszeit wechselnde Bilder

wechselnde bilder bei neuer site aufrufung

automatisch wechselnde Bilder einbauen

bilder vorladen mit script? hilfe!

Stichworte

Aktive Benutzer

Aktive Benutzer