Bildwechsel + Stop bei Mouseover

Brauni

Erfahrenes Mitglied
hallo

ich habe folgendes Problem wo ich einfach nich auf den Fehler komme:
Ich habe 5 grosse Bilder die automatisch wechseln solln.
Unter dem grossen Bild sind die 5 in Miniatur. Wenn man bei Mouseover auf eines der kleinen Bilder geht, soll dieses vergrössert darüber angezeigt werden. Sobald Mouseout soll die Slideshow weiter gehen.

Code:
<script type="text/javascript" language="JavaScript">
<!--


// Anzeigezeit in ms
var WechselZeit = 5000;


ImageArr = new Array()

// URL der Bilder  hier eintragen
ImageArr[ImageArr.length] = "Bilder/h1.png";
ImageArr[ImageArr.length] = "Bilder/h2.png";
ImageArr[ImageArr.length] = "Bilder/h3.png";
ImageArr[ImageArr.length] = "Bilder/h4.png";
ImageArr[ImageArr.length] = "Bilder/h5.png";


var xAnzahl = ImageArr.length;
var xCounter=-1;
var maus;
maus='';


function Bildwechsel01() {
xCounter = xCounter+1;
  if (xCounter < xAnzahl) 
  {
	if (maus == '')
  	 {
     document.getElementById('Foto01').src = ImageArr[xCounter];
     setTimeout ("Bildwechsel01()",WechselZeit);
     }
  }
  else
  {
     xCounter = -1;
     Bildwechsel01();
  }
}



// Startverzögerung
setTimeout('Bildwechsel01()', 2000);

//-->
</script>

Miniaturcode:
Code:
<img src="Bilder/hochzeit/h4_t.png"/ onmouseover="Foto01.src='Bilder/h4.png'; maus='stop'" onmouseout="maus=''">

Bildwechsel funktioniert. Bei Mauszeiger über dem kleinen Foto wird es gross darüber angezeigt und der Bildwechsel stoppt. Nur sobald Mausout geht der Bildwechsel nicht weiter.

Hat wer von euch einen Tipp für mich?

lg
christian
 
habs jetzt so:
Code:
<script type="text/javascript" language="JavaScript">
<!--





ImageArr = new Array()

// URL der Bilder  hier eintragen
ImageArr[ImageArr.length] = "Bilder/h1.png";
ImageArr[ImageArr.length] = "Bilder/h2.png";
ImageArr[ImageArr.length] = "Bilder/h3.png";
ImageArr[ImageArr.length] = "Bilder/h4.png";
ImageArr[ImageArr.length] = "Bilder/h5.png";


var xAnzahl = ImageArr.length;
var xCounter=-1;



var aktiv = window.setInterval("Bildwechsel01()", 5000);

function start()
{
var aktiv = window.setInterval("Bildwechsel01()", 5000);
}



function Bildwechsel01() 
{



xCounter = xCounter+1;
  if (xCounter < xAnzahl) 
  {

     document.getElementById('Foto01').src = ImageArr[xCounter];


  }
  else
  {
     xCounter = -1;

  }
}




//-->
</script>

HTML Link:
Code:
<img src="Bilder/h4_t.png" onmouseover="Foto01.src='Bilder/h4.png'; window.clearInterval(aktiv);" onmouseout="start();"/>

Das erste mal funktioniert es, jedoch beim 2ten mal springen die Bilder nicht alle 5 Sekunden um sondern ca. jede Sekunde und der clearInterval funktioniert auch nicht mehr.

Könnte mir wer bitte helfen?
Wäre super! :)
 
Du musst schon das Timeout wieder setzen. ;)

Code:
if (maus == '')
{
    document.getElementById('Foto01').src = ImageArr[xCounter];
}
setTimeout ("Bildwechsel01()",WechselZeit);
 

Neue Beiträge

Zurück