Hallo Forum,

ich möchte gerne statt "onmouseover" das bild zu ersetzen, das bild mit einen fade effekt ersetzen.
daher habe ich das hier suprbiert.. nicht lachen bin grad in den Anfängen von jQuery

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function(){ $("#home").mouseout(function(event) {         $("#home").attr({             src: "images/buttons/home.jpg"         }).("#home").fadeIn(800 ); }); $("#home").mouseover(function(event) {     $("#home").attr({         src: "images/buttons/home_hover.jpg"     }).("#home").fadeIn(800 );     }); });

er tauscht zwar das bild aus.. aber ohne hover woran kann das liegen?

Hi,

dein Bild besitzt keine Transparenz. Deshalb wird die Quelle nur gewechselt, das Faden hat keinen sichtbaren Einfluss.

Du könntest zunächst die Transparenz auf 100% setzen - durch fadeOut(0).

Beispiel:

Code :

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function(){   $("#home").mouseout(function(event) {     $("#home").[B]fadeOut(0).[/B]attr({       src: "http://www.tutorials.de/forum/images/buttons/home.jpg"     }).fadeIn(800 );   });   $("#home").mouseover(function(event) {     $("#home").[B]fadeOut(0).[/B]attr({       src: "http://www.tutorials.de/forum/images/buttons/home_hover.jpg"     }).fadeIn(800 );   }); });

Zudem ist eine weitere Angabe von ("#home") unnötig - habe ich entfernt.

Ciao
Quaese

funktioniet leider auch nicht..

denn die Fehlerkonsole gibt an:

Fehler: $("#home").fade is not a function
Quelldatei: http://www.vrc-racing.com/js/naviMouseOver.js
Zeile: 8

im netz gibt es nur beispiele mit klassen und einzelen divs die ein bzw. ausgeblendet werden..
Geht das vieleicht garnicht meine überlegung? #home it die id von img tag

Code javascript:

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function() {             $("#home").hover(                 function() {                     $(this).fadeOut(function() {                         $(this).attr({"src":"neu.png"}).fadeIn();                     });                 },                 function() {                     $(this).fadeOut(function() {                         $(this).attr({"src":"alt.png"}).fadeIn();                     });                 });         });

Erstmal binde ich das hover-Event (nimmt zwei Funktionen für Ein- und Ausfahrt der Maus). Im Event wird das Element ausgefadet. Die fade-Animation bekommt eine Funktion übergeben, welche am Ende der Animation getriggert wird (wenn das Bild unsichtbar ist). In dieser Funktion wird das Bild ausgetauscht und wieder eingefadet.

Erstmal Danke!

muss wohl noch ein wenig jQuery studieren...

Gibt es die möglichkeit.. dass es gleizeit aus und eingefadet werden kann? also geht man mit der Maus rüber ändert sich der "button"... Jetzt wird ja das alte ausgefadet und das neue eingefadet...

hier mal der link damit ihr versteht was ich meine..

http://www.vrc-racing.com

Hab ich das so zu verstehen, dass das alte und neue Bild praktisch ineinander übergehen und teilweise gleichzeitig zu sehen sind?
Zeig uns mal etwas von deinem HTML, denn so kann ich dir nicht weiter helfen. Denn um beides zu sehen, reicht ja ein einziges img-Tag nicht aus, sondern du musst zwei überlagernde Elemente haben.

Ja genau das meine ich.. schade dass es so "einfach nicht geht.. dann mache cih das wphl weiterhin mit onmouseover..onmouseout...

weil das ganze ist ja eine liste mit img-tags und per css so angepasst dass da kein rand ist etc. dass ist mir dann wohl zu schwer mit jeweils zwei tags zu arbeiten.. Aber es geht doch beim click event oder nicht? also ich klcike auf einen button.. und dann fadet ein bild über ein anderes.. da dachte ich es ginge auch mit hover bzw. mouseover

Zitat von mita1982

dann mache cih das wphl weiterhin mit onmouseover..onmouseout...

Ohne fade oder wie meinst du das? Weil meine hover()-Funktion ist ja nichts anderes als ein Shorthand für onmouseover und onmouseout.

Wie gesagt, wenn du uns das HTML-Markup deines Menüs zeigst, finden wir bestimmt eine Lösung.

Ok hier...
habe es nur an home bzw. index ausprobieren wollen..

HTML-Code:

<div id="divNavi">
    <ul id="navi">
      <li><a href="index.php"><img src="images/buttons/home.jpg"      alt="home"  id="home" /></a></li>
      <li><a href="bikes.php"><img src="images/buttons/bikes.jpg"   onmouseover="document.getElementById('bikes').src='images/buttons/bikes_hover.jpg';" onmouseout="document.getElementById('bikes').src='images/buttons/bikes.jpg';" alt="bikes"  id="bikes" /></a></li>

      <li><a href="videos.php"><img src="images/buttons/videos.jpg"   onmouseover="document.getElementById('videos').src='images/buttons/videos_hover.jpg';" onmouseout="document.getElementById('videos').src='images/buttons/videos.jpg';" alt="videos" id="videos" /></a></li>
      <li><a href="contact.php"><img src="images/buttons/kontakt.jpg"   onmouseover="document.getElementById('kontakt').src='images/buttons/kontakt_hover.jpg';" onmouseout="document.getElementById('kontakt').src='images/buttons/kontakt.jpg';"  alt="kontakt" id="kontakt" /></a></li>
    </ul>
  </div>

Erstmal ein Tipp: Wenn du Javascript direkt im Attribut stehen hast und das gleiche Element ansprechen willst, braucht du kein "document.getElementById()" sondern du kannst "this" benutzen.

Jetzt die Lösung deines Problems Verbal formuliert. Wenn du dann noch Probleme mit der Umsetzung hast, meld dich nochmal.
1.Verpasse deinen Links als Hintergrundbild das Bild, welches im normalen Zustand angezeigt werden soll (z.B. home.jpg)
2.Füge die img-Tags ein, aber mit mit style="display:none" und home_hover.jpg
3.Beim onmouseover des Links fadest du das img-Tag ein
4.Beim onmouseout des img-Tags fadest du es aus.

Das ganze lässt sich auch beliebig anders gestalten (span-Tag anstelle des img-Tag und dafür beim span ein Hintergrundbild. Wenn du dann noch home.jpg und home_hover.jpg in eine einzige Datei packst und mit background-positition arbeitest, wäre das optimal)
Auch ließe es sich genau anders herum machen, also dem Link das hover-Bild verpassen.

Probier einfach mal bisschen rum.

also:

füge ich dem li oder a tag den hintergrund home.jpg?

ansosnten habe ich es verstanden..

Sollte beides gehen, aber ich meinte das a-Tag. Das muss dann natürlich display:block und eine Höhe und Breite haben (ich kenne dein css ja nicht, aber das wird es wohl auch jetzt schon haben).

Zitat von CPoly

Sollte beides gehen, aber ich meinte das a-Tag. Das muss dann natürlich display:block und eine Höhe und Breite haben (ich kenne dein css ja nicht, aber das wird es wohl auch jetzt schon haben).

ok ich probier das die Tage aus und melde mich hier mit dem Ergebnis wieder DANKE erstmal...

Zitat von CPoly

Das ganze lässt sich auch beliebig anders gestalten (span-Tag anstelle des img-Tag und dafür beim span ein Hintergrundbild. Wenn du dann noch home.jpg und home_hover.jpg in eine einzige Datei packst und mit background-positition arbeitest, wäre das optimal)

Warum ist ausgerechnet so optimal

Kannst Du mal diese Technik genauer erläutern.. habe dasGefühl, dass selbst die Offizielle Seite von jQuery das so macht.. ich verscuhe ein wenig diese Seite zu analysieren um so professionell wie moglich das style sheat nächstes mal zu gestallen. und da ist mir das aufgefallen.. dass der hintergrund der Navi 82px hoch ist, aber die Navi an sich nur 41px...

darüberhinuas verstehe ich den status "scroll" bei einem backgroundbild nicht...

Hi,

das Stichwort lautet "CSS Sprites". Weitere Artikel kannst du den Suchergebnissen von google entnehmen.

Der Vorteil dieser Technik liegt ganz klar auf der Hand: Der Browser hat nur eine Grafikdatei zu laden, die er mittels der background-position-Eigenschaft im Anzeigebereich der einzelnen Elemente ausrichtet, und der Server-Traffic so drastisch heruntergeschraubt wird.

Daher fällt die Grafikdatei auch größer (höher, breiter) aus, wie das Element selbst, das sie als Hintergrund ausschmückt.

In meinem CSS-Tutorial CSS-Rollover und CSS-Rollover - Teil 2 stelle ich diese Methode in den Abschnitten "CSS-Rollover mit background-image" im kleinen Maßstab auf die einzelnen Menüpunkte bezogen vor. In der produktiven Praxis würden alle Hintergrundzustände der einzelnen Menüpunkte in eine einzige Grafikdatei fließen.

Ein weiterer Pluspunkt gegenüber dem Tauschen zweier oder dreier Grafikdateien, die "Hover"-Grafiken flackern beim allerersten Aufruf nicht mehr kurz auf, wenn der Browser sie in diesem Moment erst in seinen Cache lädt.

Hier im Forum nutzen wir die Technik auch an diversen Stellen:

• http://style.tutorials.de/v6/images/37/map_.png
• http://style.tutorials.de/v6/images/37/map_poll_.png
• http://style.tutorials.de/v6/images/37/map_y_.png
• http://style.tutorials.de/v6/images/37/map_box_.png
• http://style.tutorials.de/v6/images/37/map_btn_.png
• http://style.tutorials.de/v6/images/37/map_menu_.png

... um mal eine kleine Auswahl an Anwendungsbeispielen zu nennen, die sich nicht ausschließlich auf Navigationsmenüs beschränken.

mfg Maik