Bilderwechseln

[Babette]

Hallo!
Ich habe auf einer Site eine fünf-spalten Tabelle mit rechts und links Pfeilen. In die Tabelle sollen Bilder aus einem Array, die jeweils eine Zelle weiter- bzw. zurückrücken wenn auf einen der Pfeile geklickt wird.
obwohl es sich am Anfang ja garnicht so schwer anhörte schlage ich mich jetzt schon ein paar Tage mit dem Problem herum...
Bitte helft mir ihr JavaScriptkönner da Draussen...

[Joey]

Hallo Babette!

Ich habe auf einer Site eine fünf-spalten Tabelle mit rechts und links Pfeilen. In die Tabelle sollen Bilder aus einem Array, die jeweils eine Zelle weiter- bzw. zurückrücken wenn auf einen der Pfeile geklickt wird.
obwohl es sich am Anfang ja garnicht so schwer anhörte schlage ich mich jetzt schon ein paar Tage mit dem Problem herum...
Bitte helft mir ihr JavaScriptkönner da Draussen...

Der folgende Tag wechselt die Bilder bei Mouseover und Mouseout, das müßte man auch durch php anweisungen "manipulieren können:
<a href="seite.htm" onMouseover="image_0.src='2.gif';" onMouseout="image_0.src='1.gif';"><img name="image_0" src="1.gif" border="0"></a>
p.s. ein guter freeware editor, der z.B. sowas generieren kann heißt Scribe und ist im web zu kriegen.
mfg Joey

[Struppi]

Hallo!
Ich habe auf einer Site eine fünf-spalten Tabelle mit rechts und links Pfeilen. In die Tabelle sollen Bilder aus einem Array, die jeweils eine Zelle weiter- bzw. zurückrücken wenn auf einen der Pfeile geklickt wird.
obwohl es sich am Anfang ja garnicht so schwer anhörte schlage ich mich jetzt schon ein paar Tage mit dem Problem herum...

Tja, was hast du denn bereits und wo haperts?

Struppi.

[Babette]

in diesen versuch habe ich alle meine hoffnung gelegt...

bildNummer = 3;

bilder= new Array() ;
  for (i = 1; i <= 3; i++)
  {
  bilder[i] = new Image();
  bilder[i].src = "pics/FOTOS"+i+".png";
  }

function naechstesBild()
  {
  document.fotos.src = bilder[bildNummer].src;
  bildNummer++;
  if (bildNummer > 3) bildNummer = 1;
  }

bildNummer = 1;
  function vorherigesBild()
  {
  document.fotos.src = bilder[bildNummer].src;
  bildNummer--;
  if (bildNummer < 1) bildNummer = 3;

}

danke dir

[Struppi]

in diesen versuch habe ich alle meine hoffnung gelegt...

bildNummer = 3;

Das kommt zweimal vor.

bilder= new Array() ;
  for (i = 1; i <= 3; i++)

Damit verschwendets du einen Index. Ein array fängt immer bei 0 an.

{
  bilder[i] = new Image();
  bilder[i].src = "pics/FOTOS"+i+".png";

Du weißt, dass Linux Server casesensitiv sind?
Falls du das auf einen Server packst, kann es sein, das er das Verzeichniss FOTO nicht findest, wenn du es nicht explizit FOTO benennst. Tipp: immer kleinbuchstaben für Dateinamen verwenden.

}

function naechstesBild()
  {
  document.fotos.src = bilder[bildNummer].src;

Du weißt immer nur einem Bild das nächste zu, es wäre noch nützlich zu erfahren wie du die Bilder in den HTML Code eingebunden hast.

bildNummer++;
  if (bildNummer > 3) bildNummer = 1;
  }

bildNummer = 1;
  function vorherigesBild()
  {
  document.fotos.src = bilder[bildNummer].src;
  bildNummer--;
  if (bildNummer < 1) bildNummer = 3;

}

einfacher würde die ganze Sache gehen:

Parameter: +1 oder -1

function next(dir)
{
   bildNummer += dir

if(bildNummer >= bilder.length) bildNummer = 0;
   else if(bildNummer < 0) bildNummer = bilder.length - 1;

document.fotos.src = bilder[bildNummer].src;
}

Damit reicht eine Funktion.

Struppi.