jQuery- hover mit fade effekt

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).
 
CPoly hat gesagt.:
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)
Zum Vergrößern anklicken....

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:


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

mfg Maik
 
Ok Danke ziehe mir gleich diese CSS-Sprites und deine CSS Rollover rein...

Doch damit kann man ja nicht, den hover effekt mit einem "rüberfaden" machen oder?

Also jQuery...

noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..
 
mita1982 hat gesagt.:
noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..
Zum Vergrößern anklicken....
Der Ursprung der clearfix-Klasse findet sich in dem Artikel How To Clear Floats Without Structural Markup.

Diese CSS-Technik erspart dem Seitenautor ein, oder je nach Komplexitität der Seitenstruktur, mehrere inhaltsleere HTML-Elemente, die im Markup lediglich die Aufgabe übernehmen, eine Floatumgebung mit der clear-Eigenschaft abzubrechen.

Aus diesem Konstrukt:
Code: 
<div> <!-- float container -->
  <div style="float:left; width:30%;"><p>Some content</p></div>
  <p>Text not inside the float</p>
  <div style="clear:both;"></div>
</div>

wird dann kurzerhand:
Code: 
<div class="clearfix"> <!-- float container -->
  <div style="float:left; width:30%;"><p>Some content</p></div>
  <p>Text not inside the float</p>
</div>


Sollten dir noch weitere Fragen unter den Nägeln brennen, ist hierfür das CSS-Forum der passende Ort, denn mit diesem Thema hier hat dies alles ja nicht viel gemeinsam, und es soll hier ja schließlich bei einer kurzen "Off-Topic"-Frage bleiben, die dir an dieser Stelle auch gestattet sei.

mfg Maik
 
Ich weiß ja echt nicht wie oft ich Dir danken soll..

zwar verstehe ich noch nicht ganz warum man dasn machen muss.. aber In den letzten Tagen hast Du mir echt sehrviel geholfen.,

Vielcht stell ich echt im CSS Forum noch einige Fragen.. Aber es kein Design Forum hiergitb also webdesign.. nicht css, html, javscript php sondern Usability und eine Art Style Guide..

Vielen Dank nochmal und ich werde morgen oder übermorgen.. warscheinlich berichten ob es mit den Methoden hier klappt oder nicht.. Aber ich denke nicht, dass man mit den CSS Sprites einen Fade Effekt mit hilfe von jQuery erzeieln kann..
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück