Horizontale Bildlauf-Leiste

[Benj]

Hallo!

Ich arbeite üblich eigentlich nicht mit JavaScripts (sofern es sich vermeiden lässt). Nun fordert eine Kundin aber folgendes:

Eine Ebene, die 760 Pixel breit ist, ist vorhanden. In ihr soll es nun eine etwa 300px hohe Ebene geben, in der Bilder von rechts nach links wandern. Soweit hätte ich ja noch Beispiele gefunden, die sich umsetzen ließen.
Problem ist nur, dass es eher darauf hinauslaufen soll, dass ein Bild von rechts reingeschoben wird und dann ein paar Sekunden dort bleibt. Es soll auch, als Ganzes, einen Link tragen. Und dieser Link ist jeweils anders.
Am besten wäre also, wenn dieses JavaScript die Position verschiedener Ebenen, die dann die Link-Bilder enthalten, per CSS verändert.

Kann mir jemand ein grobes Gerüst geben oder einen Link zu einem solchen "Template", damit ich langsam von dem riesigen Schlauch herunterkomme, auf dem ich gerade stehe? Per Google habe ich nicht das gefunden, was ich brauche .

(Btw.: Wenn ich 1-2 Wochen Zeit hätte, würde ich versuchen, die nötigen Aufwendungen selbst zu erlernen. Leider drängt die Zeit..)

Danke im Voraus!

 

[mh1001]

Hallo,

mit "window.getElementById(id).style.left" kannst du die Position eines Elementes anhand dessen ID festlegen. Dies könnte dann in deinem Fall auch die ID des Links sein, welchem du vorher per CSS ein "display: block;" und "position: absolute;" zuweisen kannst.
Per "window.setTimeout" kannst du dann in der definierten Anzahl an Millisekunden eine Funktion aufrufen. Per if-Bedingung kannst du dann die Zeit an einer bestimmten Stelle einfach abändern.

Dies könnte dann zum Beispiel so aussehen:

position = 300;  // Startposition

function verschiebe_bild()
{
  startposition -= 1;
  
  window.getElementById('id').style.left = position + 'px';

  if(position >= -30) // negative Bildbreite
  {
    if(position = 0)
    {
      window.setTimeout('verschiebe_bild', 5000);
    }
    else
    {
      window.setTimeout('verschiebe_bild', 100);
    }
  }
}

window.onload = verschiebe_bild;

MfG mh1001

 

[Benj]

Das Problem ist ja, dass das Bild außerhalb der Ebene nicht sichtbar sein sollte. Der unsichtbare Rand der Ebene ist also quasi ein Fensterrahmen, und wenn ich von draußen rein schaue, kann ich alles, was außerhalb des Fensterrahmens ist, nicht sehen.

 

[riod]

warum nimmst du nicht flash?

 

[mh1001]

So ganz habe ich leider noch nicht verstanden, worin das Problem beseteht.
Wenn es dir nur darum geht, dass das Bild nicht mehr angezeigt wird, sobald es es sich aus dem Elternelement herausbewegt reicht eine einfache Styleangabe in Form von "overflow: hidden;".
Sollte das jetzt nicht gemeint sein, könnte dir vielleicht das CSS-Attribut clip weiterhelfen.

MfG mh1001

 

[Benj]

Im Moment probiere ich es tatsächlich erst mal mit Flash. Da ich eigentlich kein Flash mag, müsste mich die Lösung aber begeistern, dass ich es nicht doch noch mal mit JavaScript versuche.

Danke für die Tipps!