Ich möchte, dass mein Hauptlogo sich ändert, wenn ich überlege.Der beste Weg, um Rollover zu machen?
Ich verstehe, dass es mehrere Wege gibt, um dies zu erreichen, und fragte mich, was der beste Weg für Stabilität, Browserkompatibilität, Effizienz und einfache Einrichtung ist.
Einige Möglichkeiten, die ich gefunden habe, sind:
nicht mehr? Was ist das Beste?
Für Content-ful Bilder, möchten Sie die src im HTML-Markup haben. Sie möchten die Javascript-Lösung verwenden und das Rollover-Bild in ein Attribut einfügen.
Für inhaltsfreie Bilder-UI-Elemente, insbesondere solche, die auf der Site üblich oder dupliziert sind, wäre eine direkte CSS-Lösung die beste (Sie müssen die Bildpositionen bei jedem Aufruf nicht erneut deklarieren). Unter den CSS-Lösungen sind Sprites am besten, da sie keinen Vorladeaufwand erfordern.
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
In jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
Beispielimplementierung: http://jsfiddle.net/dtPRM/1/
Vorteile: Es ist einfach; es macht Sinn; Sobald Sie Ihre Bibliothek eingerichtet haben, arbeitet es mit minimalem zusätzlichen Markup.
Nachteile: Benötigt Javascript und Overhead des Ladens der jQuery-Bibliothek.
Wahrscheinlich die beste Option. Wenn Ihr Benutzer einen Browser verwendet, in dem Rollovers relevant sind (wahrscheinlich der Fall), verfügen sie über die Javascript-Funktionen, um diese Option auszuführen. Die Leute, die absichtlich Javascript aus irgendeinem Grund ausgeschaltet haben, werden darauf hinweisen, wenn Sie eine kleine Notiz hinterlassen, die besagt, dass sie möglicherweise nicht die volle Funktionalität erhalten.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
Beispielimplementierung: http://jsfiddle.net/dtPRM/5/
Ich persönlich denke, dass für Inhalt-ful Bilder, Dies ist eine noch schlechtere Option als die CSS + zwei Hintergrundbilder soluti auf. Sie trennen das HTML-Markup vom semantischen Wert des Displays.
Wenn Sie inhaltslose Bilder wie UI-Elemente verwenden, ist dies meiner Meinung nach die beste Lösung.
Eine weitere CSS-Option zur Verfügung, die keine Hintergrundbilder mit sich bringt (unter den CSS-Lösungen bevorzugt, wenn Sie die Image-Tags im HTML haben wollen, wie für semantisch sinnvolle Bilder) .
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (ich benutze den :not Pseudo-Selektor hier, aber es ist ziemlich einfach, indem es zu vermeiden, ich glaube, ich auch semantisch rückwärts die Klassennamen vor):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
Beispielimplementierung: http://jsfiddle.net/dtPRM/2/
Vorteile: Semantisch sinnvoll im Vergleich zur vorherigen CSS-Lösung, alle Informationen in das Stylesheet zu übertragen.
Nachteile: Fremdmarkierung erforderlich.
Kommentar: Dieser kann automatisch vorgeladen werden, je nachdem, ob der Browser danach fragt.
Endergebnis: Ein angemessener Fallback, wenn Option (1) nicht verfügbar ist, weil Sie unbedingt IE2-Kompatibilität oder Nicht-JS-Unterstützung benötigen.
Ich erwähne das nur, weil Sie es in der Frage erwähnt. Ich würde es nicht benutzen.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
Beispielimplementierung: http://jsfiddle.net/dtPRM/4/
Vorteile: Weit kompatibel; Alles, was Sie wirklich unterstützen müssen, sind Hintergrundbilder und Hover.
Nachteile: Semantisch seltsam, Bilder in CSS zu setzen und es dort zu zentralisieren. Macht zukünftige Änderungen schwieriger. Wenn Sie jedoch ein Szenario haben, das ein Rollover-Bild rechtfertigt, besteht eine gute Chance, dass es sich um ein nicht-content-Bild (z. B. ein UI-Element) handelt. In diesem Fall wäre CSS semantisch (vielleicht) besser geeignet als a normales Bild. Siehe den Hinweis zu den Sprites unten.
Andere Nachteile: Sie müssen vorsichtig sein, Bildhöhe und Breite zu deklarieren (eine gute Praxis sowieso, aber es kann mühsam werden, wenn Sie nur Dinge erledigen wollen). Benutzer, die in mobilen Browsern arbeiten, die CSS-Hintergrundbilder möglicherweise ungewöhnlich behandeln.
Noch mehr Nachteile: Wenn Sie einen preloader auf es Schicht wollen, Sie gehen Javascript zu verwenden und irgendwie die Roll-able Elemente auswählen und mit dieser Rate, können Sie auch Javascript verwenden für alles.
Untere Zeile: Verwenden Sie dies nicht für inhaltsreiche Bilder. Wenn Sie sich von Javascript fernhalten müssen, verwenden Sie Sprites für Benutzeroberflächenelemente und die alternative Lösung für semantisch sinnvolle Bilder.
Ab jQuery 1.4.3 können Sie mit '.data()' auf HTML5 'data-' Attribute zugreifen. http://api.jquery.com/data – nyuszika7h
Danke für diesen schönen Überblick. Ich benutze die ** "Die CSS-Lösung: Auch okay" ** wegen der Einfachheit der Bearbeitung (beide URLs an einem Ort) und um mit _retina.js_ kompatibel zu sein (das schaltet bei allen img-Tags in highres-Bilder um). Aber es stellt sich heraus, dass diese Lösung auf Touch-Geräten fehlerhaft ist: Wenn der Hover-img verlinkt ist, wird die Verbindung nicht immer gefolgt, wenn sie angezapft wird. Also habe ich das Schweben für Touch-Geräte deaktiviert, da es dort sowieso keinen Sinn macht. (Verwendet [this] (http://stackoverflow.com/a/13470899/1060128) Erkennung) – johjoh
Sie sollten eine CSS-Regel :hover verwenden.
CSS bei weitem. Auch wenn Sie Ihr Bild mit JavaScript vorspeichern möchten.
Bild Rollovers 'Sprites' List a part - sprites CSS
CSS Hintergründe und "schweben"
Verwenden CSS-Sprites, mit anderen Worten kombinieren beiden Bilder in ein und verwenden Sie dann CSS :hover um das Bild zu verschieben verwenden.
Ein Vorteil von CSS ist, dass es auch funktioniert, wenn JavaScript deaktiviert ist.
Ein Vorteil der Verwendung eines einzelnen Bildes ist die Vermeidung der zusätzlichen HTTP-Anfrage.
See: http://css-tricks.com/css-sprites/
Werkzeuge erzeugen zu helfen, Bild und CSS:
$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
oder
$('#div1').onmouseover()...
$('#div1').onmouseout()...
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
ein Bild wie folgt aus:
Hinweis: JS Vermeiden Bild Ersatz, wie Sie eine kurze Bildladezeit entstehen, wenn Bilder vor nicht zwischengespeichert werden.
Hoffe, das hilft bro!
W.
Die Bilder von CSS sind auch nicht vorgeladen, speziell in IE –
Wenn Sie ein Sprite verwenden, lädt der Browser das gesamte Sprite-Bild (vorausgesetzt, das Element, das es benötigt, ist sichtbar). Hier ist es so, dass der mouseover-Teil geladen wird, was angeblich zu einem Vorladen führt. –
Welche Art von Element sollte "# btn" für die beste Praxis sein? Ein 'div' mit nichts drin? – AP257
Verwenden CSS-Sprites und die: psuedo-Klasse in CSS schweben.Hier ist der Grund:
Schaltbildquelle entweder durch JS oder durch die CSS bewirkt ein „blink“ auf der ersten Maus über, während das neue Bild vom Browser heruntergeladen wird. Wenn Sie das Sprite verwenden, ändert nur ein Bild die Position, also kein Blinzeln.
Ein einzelnes Bild reduziert HTTP-Anforderungen, wodurch die Website im Allgemeinen schneller geladen wird.
Es funktioniert, wenn der Benutzer JavaScript deaktiviert hat.
Es wird von allen Browsertypen unterstützt (Desktop, sowieso, Telefon-Browser ohne: Hover-Status zählt sowieso nicht).
Weitere Informationen: http://css-tricks.com/css-sprites/
Ich fühle mich wie dies sollte Wiki-ed. Es ist eine ziemlich häufige Frage und eine gute Frage, wie man für den Zwischen-Frontend-Coder antwortet. Darüber hinaus fordert es die "beste" Lösung für etwas, das je nach den Umständen viele Lösungen hat. –