Skript für Bilderdastellung mit Animation

Björn · 31. Oktober 2005

Ich möchte gerne das eine Reihe von Bildern immer wieder durchläuft. Wenn man dann auf ein Bild mit der Maus geht sollte es so sein das das Bild vergrößert dagestellt wird.

ronny1978 · 1. November 2005

Hey habe dir hier nen kleines script geschrieben, ist bestimmt das was du brauchst.

Code:

<html>
<head>
<title></title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language="JavaScript">
<!--

var i = 0, image = 1;
var path="";
function img() {
  i = i + 1;
  if(i >= 10)
   window.clearInterval(aktiv);
  if(image==1)
  {
  	path="img/02.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";

	//document.bgColor="yellow";
	image=2;
	return;
  }
  else if(image==2)
  {      path="img/03.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=3;
	return;
  }
  else if(image==3)
  {      path="img/04.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=4;
	return;
  }
  else if(image==4)
  {      path="img/05.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=5;
	return;
  }
  else
  {      path="img/01.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=1;
	return;
  }

}
var aktiv = window.setInterval("img()",4000);

var x = 50;
var y = 50;

function zoom(){
	var action = window.setInterval('zoom()',50);
	var bilder = document.getElementById('Bild');

	if (x<=128){

         	if (document.all) {
	                 document.Bild.style.width = x;
                          document.Bild.style.height = y;
	         }

	         if (document.getElementById && !document.all) {
	                 bilder.style.width = x;
                          bilder.style.height = y;
	         }

	         if (document.layers) {
	                 document.Bild.width=x;
                          document.Bild.height = y;
	         }
	         x++;
                  y++;
	}else{
		window.clearInterval(action);
	}
	action;

}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img id="Bild" onClick="javascript:zoom();" src="img/01.jpg" height="50px" width="50px" name="Bild" alt="" border="0" vspace="10" hspace="10" usemap="#tween">

</body>
</html>

Björn · 2. November 2005

Danke, schon mal. Das Programm ist soweit super. Nur das die Bilder weiter durchlaufen und die Bilder auch nachdem man die Maus wieder wegnimmt noch großbleiben. Ich wollte das gerne mit einer Art Fade haben also so das man nur mit der Maus drübergehen muss. Sorry es ist immer schwer zu erklären.

ronny1978 · 2. November 2005

Hey das Script hab ich abgeändert.
Das Script lädt eine Anzahl von 10 Bildern, je nachdem wie viele Bilder du hast kannst du die Bilder laden (oder die Bilder wiederholen). An der Position if(i >= 10) in der Funktion img() kannst du die Anzahl beschränken.

Die geschwindigkeit kannst du hier ändern " var aktiv = window.setInterval("img()",1000); "

Code:

<html>
<head>
<title></title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language="JavaScript">
<!--

var i = 0, image = 1;
var path="";
function img() {
  i = i + 1;
  if(i >= 10)
   window.clearInterval(aktiv);
  if(image==1)
  {
  	path="img/02.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";

	//document.bgColor="yellow";
	image=2;
	return;
  }
  else if(image==2)
  {      path="img/03.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=3;
	return;
  }
  else if(image==3)
  {      path="img/04.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=4;
	return;
  }
  else if(image==4)
  {      path="img/05.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=5;
	return;
  }
  else
  {      path="img/01.jpg";
  	document.getElementById("Bild").src = path;
  	document.getElementById("Bild").title = "";
	//document.bgColor="aqua";
	image=1;
	return;
  }

}
var aktiv = window.setInterval("img()",2000);


function zoom(){
         document.Bild.style.width = 128;
         document.Bild.style.height = 128;

}
function outzoom(){
         document.Bild.style.width = 50;
         document.Bild.style.height = 50;

}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<img id="Bild" onClick="javascript:i=0; window.clearInterval(aktiv); aktiv = window.setInterval('img()',2000);"  onMouseOver="javascript:zoom();" onMouseOut="javascript:outzoom();" src="img/01.jpg" height="50px" width="50px" name="Bild" alt="" border="0" vspace="10" hspace="10" usemap="#tween">

</body>
</html>

Suche

Skript für Bilderdastellung mit Animation

Björn

Lt. Junior Grade

ronny1978

Cadet 4th Year

Anhänge