onmouseover fadein

[Red Hair]

Hallo Leute,

erstmal schön das es Selfhtml gibt. Ich hab als Anfänger schon viel gelernt!
Ich suche schon seit tagen nach einer Lösung leider finde ich zu meinem Problem nichts und versuche es hier mal.
Bestimmt habt Ihr einen Link oder könnt mir sonst helfen.
Also ich habe eine Menueleiste und darunter ein img.
Nun hab ich es hinbekommen, dass wenn ich mit der mouse darüber fahre, darunter das img wechselt.

  
<div id="menue">  
<ul>  
 <li><a href="./tghome.html" id="wo" >home</a></li>  
 <li><a href="./tgref.html" onmouseover="bild.src='./img/Feuerwerk3_650_250.jpg';"  
onmouseout="bild.src='./img/Speicher650_250.jpg'">referenz</a></li>  
 <li><a href="./tgequipment.html" onmouseover="bild.src='./img/Feuerwerk1_650_250.jpg';" onmouseout="bild.src='./img/Speicher650_250.jpg'">equipment</a></li>  
 <li><a href="./tgkontakt.html"	onmouseover="bild.src='./img/Feuerwerk2_650_250.jpg';" onmouseout="bild.src='./img/Speicher650_250.jpg'">kontakt</a></li>  
</ul>  
</div>		  
<div id="bild">  
<img src="./img/Speicher650_250.jpg" name="bild" alt="" width="650 "height="250" border="0" title="">  
</div>  

Nun meine Frage:
Wie kann ich hinbekommen, dass die IMG eingeblendet werden, also fadein fadeout.

Gruß Red

[Daniel Petratsch]

Wie kann ich hinbekommen, dass die IMG eingeblendet werden, also fadein fadeout.

Hallo Red,

kurzes Stichwort für Google: jQuery

[Red Hair]

Hallo,

erstmal vielen Dank für Eure Hilfe.
Da ich gerade erst mit JS anfange ist das alles noch verwirrend und an die Bedienung des Forums muss ich mich erst noch gewöhnen.
Also mit dem ersten Vorschlag komme ich nicht ganz klar. Wie soll ich die Fadefuntion in meine Mouseover="" einbauen?
Den zweiten hatte ich auch schon gelesen aber mir fehlen da die Kenntnisse es so zu ändern, dass es bei passt.
Den 3ten schaue ich mir gerade an.

Nun ich werde mal weiter schauen und lernen.

Gruß und Danke
Red

[ChrisB]

Hi,

Nun meine Frage:
Wie kann ich hinbekommen, dass die IMG eingeblendet werden, also fadein fadeout.

Wenn du den Artikel Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts mal durcharbeitest, kannst du das sicher anschliessend auch entsprechend angepasst für dein Vorhaben verwenden.

MfG ChrisB

[HAL]

Nun meine Frage:
Wie kann ich hinbekommen, dass die IMG eingeblendet werden, also fadein fadeout.

Gruß Red

Das ganze könnte man vielleicht auch so lösen:

  
function set_trans(a,was) {  
  var perc=a/100;                     // Umrechnug in Wert zwischen 0 und 1 für opacity  
  var filter="Alpha(opacity="+a+")";  // IE  
  var el=document.getElementById("bild");  
  el.style.filter=filter;             // IE (Wert zwischen 0 und 100)  
  el.style.opacity=perc;              // style setzen  
  if(was=="in") {                     // Wenn FadeIn  
    a=a+5;                            // Hier kann die Geschwindigkeit angepasst werden z.B. +10 -> schneller, +1 -> langsamer  
    if(a<=99)                         // Wenn noch nicht den Max-Wert erreicht  
      window.setTimeout("set_trans("+a+",'"+was+"')", 1); // Diese Funktion wieder aufrufen  
  }  
  else {                              // das gleiche nochmal für fadeOut  
    a=a-5;  
    if(a>=0)  
      window.setTimeout("set_trans("+a+",'"+was+"')", 1);  
  }  
}  

  
<div style="height:80px; width:80px; background:url(bild.gif);" id="bild"></div>  
<input type="button" value="fadeIn" onclick="set_trans(0,'in');" />  
<input type="button" value="fadeOut" onclick="set_trans(100,'out');" />  

Das ist mir jetzt dazu auf die Schnelle eingefallen, es gibt bestimmt auch noch schönere Methoden. Das Ganze sollte auch im InternetExplorer laufen (ungetestet). Wenn du nun ein Bild faden willst kannst du es ja entsprechend umbauen, ich hoffe es hilft.

Grüße.