Bilderwechsel

[skywook]

Hallo,
habe folgendes Script in meine Website eingebunden (habe ich hier gefunden):

<script type="text/javascript">
 var b = new Array();
 b[0] = new Image(); b[0].src = "./bilder/winterbild.jpg";
 b[1] = new Image(); b[1].src = "./bilder/winterbild1.jpg";

var i = 0;
 function Animation () {
   if (i > 1)
   i = 0;
   document.images[0].src = b[i].src;
   i = i + 1;
   window.setTimeout("Animation()", 1000);
 }

window.setTimeout("Animation()", 1000);
</script>

Funktioniert auch sehr gut. Die Bilder werden gewechselt. Nur auf dieser  Seite habe ich mehrere img. Und der Bilderwechsel wird beim ersten Bild durchgeführt. Kann ich den Bilderwechsel nicht auf ein bestimmtes fixieren.
Bin leider noch ein Neuling auf diesem Thema. Also ich hoffe ich habe mich verständlich ausgedrückt.

Sky

[keine_Ahnung]

Hi Sky,

ich weiß ja nicht was du damit vor hast aber ich hab meine Bildwechselfunktion für meine Navigation mit CSS gemacht:

CSS:
.Links1 {
 font-size:12px;
 font-weight:bold;
 margin-left:+33px;
 }
.Links2 {
 font-size:12px;
 font-weight:bold;
 margin-left:+54px;
 }
#box {
 line-height:29px;
 margin-bottom:15px;
 }
.menu{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_0.jpg);
 background-repeat:no-repeat;
 }
.menu:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_1.jpg);
 background-repeat:no-repeat;
 }
.menu_o{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_oben_0.jpg);
 background-repeat:no-repeat;
 }
.menu_o:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_oben_1.jpg);
 background-repeat:no-repeat;
 }
.menu_u{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_unten_0.jpg);
 background-repeat:no-repeat;
 }
.menu_u:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_unten_1.jpg);
 background-repeat:no-repeat;
 }
.umenu{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Unterpunkt_0.jpg);
 background-repeat:no-repeat;
 }
.umenu:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Unterpunkt_1.jpg);
 background-repeat:no-repeat;
 }
a:link {
 color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }
 a:visited {
  color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }
 a:hover {
  color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }

Und im html dann:

<div id="box"><a target="_top" href="../../index.htm" class="menu_o"><span class="Link1">Startseite</span></a>
<a target="_top" href="../seite1.htm" id="menu"><span class="Links1">Link1</span></a>
<a target="_top" href="Link2.htm" class="menu"><span class="Links1">Link2</span></a>
<a href="Unter_Link2a.htm" class="umenu"><span class="Links2">Unterpunkt</span></a>
<a href="Unter_Link2b.htm" class="umenu"><span class="Links2">Unterpunbkt2</span></a>
</div>

Das werden dann so Punkte die Untereinander sind. Wie du siehst gibt es vier verschiedene Punkte in jeweils zwei verschiedenen zuständen. Kann natürlich beliebig ausgebaut werden.
Die Span brauchst du um den Text richtig vor dem Hintergrund zu positionieren.

Hoffe es hilft dir.

[Gunnar Bittersmann]

Hello out there!

document.images[0].src = b[i].src;

der Bilderwechsel wird beim ersten Bild durchgeführt.

Genau auf dieses beziehst du dich ja mit 'document.images[0]' auch.
                                                          ▲

Kann ich den Bilderwechsel nicht auf ein bestimmtes fixieren.

Den Index auf den jeweils gewünschten ändern. Oder den 'img'-Elementen IDs geben und mit 'getElementById' zugreifen.

See ya up the road,
Gunnar