bilder mit javascript ändern mittels onmouseover

W

wahed132

Mitglied
hii
hätte mal eine kleine frage
also
ich hab ein bild
und bei onmousover sollen nacheinander 4 bilder mit 500 millisekunden abstand gewechselt werden.
aber ich weis nicht wie ich das machen soll
ich hab da so einen kleinen ansatz
aber naja funktionert net ganz^^
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="Content-Script-Type"
 content="text/javascript" />
  <title>Beispiel</title>
  <script type="text/javascript">
    bild1=new Image();
    bild1.src="Neuer%20Ordner/bild1.jpg";
    bild2=new Image();
    bild2.src="Neuer%20Ordner/bild2.jpg";
    bild3=new Image();
    bild3.src="Neuer%20Ordner/bild3.jpg";
    bild4=new Image();
    bild4.src="Neuer%20Ordner/bild4.jpg";
  function Bildwechsel(Bildnr,Bildobjekt)
 {
    window.document.images[Bildnr].src = Bildobjekt.src;
    sleep(500);
 }
  function sleep(ms){
    var zeit=(new Date()).getTime();
    var stoppZeit=zeit+ms;
    while((new Date()).getTime()<stoppZeit){};
  }
  </script>
</head>
<body>
 <img style="width: 150px; height: 150px;" alt=""
 onmouseover="Bildwechsel(0, bild1);Bildwechsel(0, bild2);Bildwechsel(0, bild3);Bildwechsel(0, bild3);"
 src="Neuer%20Ordner/bild1.jpg" />
</body>
</html>
 
Hi,

in JavaScript gibt es die Methode setTimeout, mit deren Hilfe Anweisungen zeitverzögert ausgeführt werden können.

Beispiel:
Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="Content-Script-Type"
 content="text/javascript" />
  <title>Beispiel</title>
  <script type="text/javascript">
    bild1=new Image();
    bild1.src="bild.jpg";
    bild2=new Image();
    bild2.src="bild1.jpg";
    bild3=new Image();
    bild3.src="bild2.jpg";
    bild4=new Image();
    bild4.src="bild3.jpg";

 function Bildwechsel(Bildnr, intLfdNr){
  window.document.images[Bildnr].src = eval("bild"+intLfdNr+".src");
  intLfdNr++;

  if(intLfdNr < 5)
    hTimer = window.setTimeout(function(){Bildwechsel(Bildnr, intLfdNr);}, 500);
}

  </script>
</head>
<body>
 <img style="width: 150px; height: 150px;" alt="" onmouseover="Bildwechsel(0, 1);" src="bild.jpg" />
</body>
</html>
Der Funktion wird nun neben des Bildindexes die laufende Nummer des Bildobjekts übergeben, mit dem begonnen werden soll.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück