✔ JS Fade Effekt für images & divs

OK - Hätte ich auch drauf kommen können.... Danke.
Eines noch: Wie müsste ich denn vorgehen, wenn ich nun noch den jeweiligen aktiven (zum Bild passenden) link optisch, also mit einer class hervorheben möchte?
Gruß, Jan
 
Das Skript gefällt mir. Aber warum geht es nur als klickbare Version. Mit "OnMouseOver" funktioniert es im Internet Explorer, aber nicht im Firefox :confused:

HTML: 
<a onmouseover="javascript:blendimage('blenddiv','blendimage', 'jsfade_img/a.jpg',200)">Image 1</a> 
<a onmouseover="javascript:blendimage('blenddiv','blendimage', 'jsfade_img/b.jpg',200)">Image 2</a> 
<a onmouseover="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="" />

Hab ich einen Denkfehler drin oder warum geht es nicht im Firefox?

Liebe Grüße
Katrin
 
Hi,

also wenn ich in meiner letzten Version das Script im onclick-Event aufrufe und die Bildquellen über den Index aus dem Array hole, funktioniert es.
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="#" onmouseover="blendimage('blenddiv','blendimage', 0, 200);">Image 1</a>
<a href="#" onmouseover="blendimage('blenddiv','blendimage', 1, 200);">Image 2</a>
<a href="#" onmouseover="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
 
Hi Quaese!

Wow, das ging schnell. Aber wenn ich deinen oben geposteten Code bei mir einsetze geht es zwar im IE7, aber im FF3 passiert nichts (kein Bild zu sehen).

Eine ratlose
Katrin
 
Hi Ratlose ;-)

das Problem ist, dass eine Funktion den gleichen Namen hat wie eine ID - blendimage.

Die Lösungsmöglichkeiten sind mannigfaltig:
  • Name der Funktion ändern
  • Funktion im gültigen Kontext aufrufen
Code: 
onmouseover="window.blendimage_('blenddiv','blendimage', 0, 200);"
  • Name der ID ändern
Du hast also die freie Auswahl!

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

Neue Beiträge

Zurück