✔ JS Fade Effekt für images & divs

janosh75 · 7. April 2009

Hallo zusammen,
ich habe da ein Problem:
Ich habe mit Javascript eine Art Slideshow "gebastelt" (bin nicht wirklich fit in JS) mit der einzelne Bilder durch klick auf den jew. Link ein- bzw ausfaden. Klappt soweit wunderbar:

Code:

<script type="text/javascript">
 //change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	 
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}
   
</script>

HTML:

<a href="javascript:blendimage('blenddiv','blendimage', 'jsfade_img/a.jpg',200)">Image 1</a> 
<a href="javascript:blendimage('blenddiv','blendimage', 'jsfade_img/b.jpg',200)">Image 2</a> 
<a href="javascript:blendimage('blenddiv','blendimage', 'jsfade_img/c.jpg',200)">Image 3</a> 
<div style="background-image: url(jsfade_img/a.jpg); background-repeat: no-repeat; width: 400px; height: 150px;" id="blenddiv">
<img src="a.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />

Ich würde aber zusätzlich noch gerne eine Bildbeschreibung zu den jew. Bildern hinzufügen, die ebenfalls mit den Bilder fadet!
Komme da aber leider nicht weiter .

Bin für jeden Tip oder Gedankenanstoß dankbar!!

Maik · 7. April 2009

Hi,

hierfür wirst du wohl den HTML- und JS-Code erweitern müssen, damit beim Klick auf den Link nicht nur das Bild gewechselt wird.

mfg Maik

janosh75 · 7. April 2009

Das ist mir schon klar..nur wie?
Habe es probiert mit drei verschieden divs zu erstellen, deren style ich dann auf display:none gesetzt habe, nur scheint mir das etwas zu umständlich....

Quaese · 8. April 2009

Hi,

die CSS-Eigenschaft für Transparenz wird an die Kindelemente vererbt. Damit sollte es möglich sein, einen alles umschliessenden Container einfaden zu lassen.

Die Transparenz in einer for-Schleife zu ändern ist nicht der richtige Weg. Stattdessen sollte sich die Funktion zum Ändern der Transparenz solange selbst periodisch aufrufen, bis der maximale Wert erreicht wurde.

Der Info-Text zu den Bildern kann in einem Array verwaltet werden. Dort könnten auch die Bildquellen angegeben werden.

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrImg = [["bild1.jpg", "Bild 1"],
              ["bild2.jpg", "Bild 2"],
              ["bild3.jpg", "Bild 3"]];

 //change the opacity for different browsers
function changeOpac(opacity, id) {
  if(opacity <= 100){
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    opacity+=2;
    hTimer = setTimeout("changeOpac(" + opacity + ",'" + id + "')", 5); 
  }
}

function blendimage(divid, imageid, intImg, millisec) {
  //set the current image as background
  document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

  //make new image
  document.getElementById(imageid).src = arrImg[intImg][0]; //imagefile;
  document.getElementById(divid).getElementsByTagName("p")[0].innerHTML = arrImg[intImg][1];

  //make image transparent
  changeOpac(0, divid);
}
 //-->
</script>
</head>
<body>
<a href="javascript:blendimage('blenddiv','blendimage', 0, 200)">Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 1, 200)">Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 2, 200)">Image 3</a>
<div style="background-image: url(jsfade_img/a.jpg); background-repeat: no-repeat; width: 400px; height: 150px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blenddiv">
  <img src="bild1.jpg" style="width: 200px; height: 150px; border: 0 none;" id="blendimage" alt="" />
  <p>Info 1</p>
</div>
</body>
</html>

Ciao
Quaese

janosh75 · 8. April 2009

Vielen vielen Dank, Quaese.
Läuft wunderbar. Endlich komme ich weiter!
Danke.

Eine Frage hätte ich doch noch: Wie gehe ich am besten vor, wenn ich den Wechsel der Bilder zusätlich zu den Links mit einem "Timer" erreichen möchte, also zb alle 5sec ein neues Bild?

SCIPIO-AEMILIANUS · 8. April 2009

An Quaese's Beispiel:

HTML:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrImg = [["bild1.jpg", "Bild 1"],
              ["bild2.jpg", "Bild 2"],
              ["bild3.jpg", "Bild 3"]];

 //change the opacity for different browsers
function changeOpac(opacity, id) {
  if(opacity <= 100){
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    opacity+=2;
    hTimer = setTimeout("changeOpac(" + opacity + ",'" + id + "')", 5); 
  }
}
var currentImage=0;
var intervalVar=null;
function blendimage(divid, imageid, intImg, millisec) {
  //set the current image as background
  currentImage=intImg;
  document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

  //make new image
  document.getElementById(imageid).src = arrImg[intImg][0]; //imagefile;
  document.getElementById(divid).getElementsByTagName("p")[0].innerHTML = arrImg[intImg][1];

  //make image transparent
  changeOpac(0, divid);
}
function play(el,state){
    if(state==1)
    {
        el.innerHTML="STOP";
        el.onclick="play(this,0)";
        intervalVar = window.setInterval("next()", 5000);
    }
    else
    {
           el.innerHTML="PLAY";
           el.onclick="play(this,1)";
        window.clearInterval(intervalVar);
    }
}
function next(){
    currentImage++;
    if(currentImage==arrImg.length)
    {
        currentImage=0;
    }
    blendimage('blenddiv','blendimage', currentImage, 200);
}
 //-->
</script>
</head>
<body>
<a href="javascript:blendimage('blenddiv','blendimage', 0, 200)">Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 1, 200)">Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 2, 200)">Image 3</a>
<div style="background-image: url(jsfade_img/a.jpg); background-repeat: no-repeat; width: 400px; height: 150px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blenddiv">
  <img src="bild1.jpg" style="width: 200px; height: 150px; border: 0 none;" id="blendimage" alt="" />
  <p>Info 1</p>
</div>
<a href="#" onclick="play(this,1)">PLAY</a>
</body>
</html>

EDIT: Hab meinen Fehler gefunden. Hatte versehentlich hinter length zwei Klammern gehängt. Nun sollte es klappen.

janosh75 · 8. April 2009

Danke für die schnelle Antwort, Scipio - leider scheint es aber so nicht zu laufen... zumindest nicht bei mir

Quaese · 8. April 2009

Hi,

versuch es mal hiermit:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrImg = [["bild1.jpg", "Bild 1"],
              ["bild2.jpg", "Bild 2"],
              ["bild3.jpg", "Bild 3"]];

var intLastImg = null;
var hTimer = hTimer2 = null;

 //change the opacity for different browsers
function changeOpac(opacity, id) {
  if(opacity <= 100){
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    opacity+=2;
    hTimer = setTimeout("changeOpac(" + opacity + ",'" + id + "')", 5);
  }else if(document.getElementById("cbAuto").checked){
    // Bildindex im gültigen Bereich halten
    intLastImg = (++intLastImg < arrImg.length)? intLastImg : 0;
    // Fade-Initialisierung-Funktion zeitversetzt erneut starten
    hTimer2 = setTimeout(function(){ blendimage('blenddiv','blendimage', intLastImg, 200)}, 5000);
  }
}

function blendimage(divid, imageid, intImg, millisec){
  // Falls bereits ein manuell ausgelöster Timer läuft -> stoppen und resetten
  if(hTimer != null) resetTimer(hTimer);
  // Falls bereits ein automatischer Timer läuft -> stoppen und resetten
  if(hTimer2 != null) resetTimer(hTimer2);

  speed = Math.round(millisec / 100);
  var timer = 0;

  // set the current image as background
  document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

  //make new image
  document.getElementById(imageid).src = arrImg[intImg][0];
  document.getElementById(divid).getElementsByTagName("p")[0].innerHTML = arrImg[intImg][1];
  intLastImg = intImg;

  //make image transparent
  changeOpac(0, divid);
}

function resetTimer(hT){
  clearTimeout(hT);
  hT = null;
}
 //-->
</script>
</head>
<body>
<p><input type="checkbox" id="cbAuto" value="">automatisch</p>
<a href="javascript:blendimage('blenddiv','blendimage', 0, 200)">Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 1, 200)">Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 2, 200)">Image 3</a>
<div style="background-image: url(jsfade_img/a.jpg); background-repeat: no-repeat; width: 400px; height: 150px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blenddiv">
  <img src="bild1.jpg" style="width: 200px; height: 150px; border: 0 none;" id="blendimage" alt="" />
  <p>Info 1</p>
</div>
</body>
</html>

Ciao
Quaese

janosh75 · 8. April 2009

Danke Quaese! Klappt wieder wunderbar

Eine letzte Frage hab ich leider doch noch:
Ich würde den Timer gerne direkt beim Seitenaufruf starten. Hatte gehofft, dass das einfach geht, indem ich die checkbox auf checked setzte. Ergab aber leider nicht den gewünschten Erfolg.

Quaese · 8. April 2009

Hi,

setze die Checkbox und rufe das Script im onload-Event des Dokuments auf. Dazu notierst du am Ende des JS-Bereichs folgendes:

Code:

window.onload = function(){
  blendimage('blenddiv','blendimage', 0, 200);
}

Ciao
Quaese

✔ JS Fade Effekt für images & divs

janosh75

Mitglied

Maik

janosh75

Mitglied

Quaese

Moderator

janosh75

Mitglied

SCIPIO-AEMILIANUS

aka Dubdidadu

janosh75

Mitglied

Quaese

Moderator

janosh75

Mitglied

Quaese

Moderator

Neue Beiträge