Rollover-Bild, kein Javascript, kein Link, pure CSS, code-Validierung und-Browser-kompatibel

Rollover-Bild, kein JavaScript, kein Link, reiner CSS-code validieren und Browser kompatibel sind.

Hallo an alle, ich arbeite 24 Stunden die Meerenge zu kommen mit dieser Recht einfache Lösung. Ich möchte wissen, ob alles in Ordnung ist und ob es Möglichkeiten gibt, sich zu verbessern. Es ist sehr elegant, hier gehen wir:

Habe ich nur ein Bild "Logo" aber es wird sich zeigen, als 2 verschiedene logo jeweils mit einem rollover-Effekt.
Ich benutze ein sprite (nur 1 Bild, das meine 4 logos) und ich einfach ändern Sie die position.

Hier füge ich mein Bild in ein div mit

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Dann füge ich in einem anderen div das gleiche Bild aber mit einer anderen id

<div id="logo-rollover-2" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Nun mein CSS:

.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

Erklärungen: wenn jemand schweben ein Bild, das Sie transparent und zeigen Sie das hintergrund-Hexe ist das gleiche Bild aber mit einer anderen position. Deckkraft: 0 für Firefox, Google und filter:alpha(opacity=0) für Entdecker. position: relative auf die .logo-rollover-Klasse ist für die Vereinbarkeit der verdeckte überlauf mit IE6 & IE7. display:block; wird Hinzugefügt, um die id-img für den Opera-browser.

- Kein Hack:, Wenn es keine Verbindung, es gibt keine Notwendigkeit href="#" oder "javascript:void(0)"

Vorteile: statt um 4 (oder mehr) Bilder, es ist nur 1 Bild (die Größe der 1-image-sprite ist kleiner als die Gesamtgröße von 4). der rollover ist sofort da das Bild bereits heruntergeladen wurde. Kein hack, kein falscher link, code validieren. Fügen Sie einen Titel zu dem Bild. Der einzige browser nicht überschlagen ist der IE6 die Seite ist aber nicht gebrochen, das logo korrekt angezeigt. Es gibt einen hack für die Aktivierung der hover bei IE6 habe ich aber nicht stört, da der IE6 ist tot.

Tipp: verwenden Sie den gleichen Pfad für das Bild überall.
Ich meine die "Pfad-zu-deinem-Bild" muss für alle das gleiche rufen. Da der browser-Cache.

Ist dies die beste elegante Art und Weise? Können diesen code verbessern? Ich hoffe, es wird jemand helfen, denn es war eine echte Schmerzen zu entwickeln, danke an die anderen user hier fand ich ein paar tricks hier und da und kam mit dieser.

Kommentar dankbar.

InformationsquelleAutor Sylvain Larose | 2011-05-25
  1. 3

    Warum nicht komplett entfernen, innere <img> und erstellen logo mithilfe von CSS-hintergrund?

    <a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

    Erklärung:

    <a> ist das einzige element, das unterstützt :hover-pseudo-Selektor auf IE6. Wenn Sie wollen native Lösung für den hover-logo, müssen Sie dieses tag benutzen. Einige Menschen manchmal wrap andere Elemente ab: <a><div></div></a> zu geben, die div hover-Eigenschaft, die durch Zugriff von CSS mit a:hover div { }

    overflow:hidden; and text-indent:-1000px; ausblenden von text aus dem inneren der div. Es ist eine gute Praxis zu verlassen, text innen für die Zugänglichkeit von Gründen.

    background legt die Hintergrundfarbe des div, erstmal gerade steht auf 0, 0

    background-position findet der eigentliche trick und verschiebt das Bild - es bewegt sich innerhalb der 'viewport' div andere Teil des Bildes sichtbar.

    • Larose: Auch wenn Sie nicht wollen, um einen link verwenden, ich denke, es ist das geeignetste element für diesen Einsatz.
    • oh, habe ich verpasst den Punkt über "kein link", die IMHO eine dumme Forderung. ALLE erwarten die Nutzer umgeleitet werden, auf der homepage, wenn Sie auf das logo klicken. Es ist eine gängige usability-Erwartung.
    • Sie verpassen den Punkt wieder, ich habe nie gesagt, dass es für die Haupt-website-logo. Natürlich meine Haupt-website-logo-redirect auf die homepage... ich habe diesen code für Dekorative Bild in meinen Seiten und wollte nicht, dass die ref "#" oder " javascript(void) wie die meisten Menschen tun, und ist nicht gültig. Das rollover-Bild ist für den Gebrauch mit no link und zu validieren. Nichts mehr oder weniger.
    InformationsquelleAutor rochal
  2. 0

    nette Beschreibung! Ich sehe eine kleine Verbesserung: legen Sie die hintergrund-und no-repeat definition .logo-rollover-Klasse haben weniger css-code ein (Sie schreiben es nur einmal statt zweimal)

    • Danke, ich bearbeitet den code entsprechend Ihren Vorschlag. Jetzt muss es sich um eine nahezu perfekte code, habe ich es endlich geschafft!
    • Schön! Sie können die hintergrund-url-Zeug gibt es auch!
    • Sie sind direkt über das hinzufügen der link in der Klasse statt zweimal in der id, ich bearbeitet die post entsprechend Ihren Vorschlag. Ich habe auch ein display:block, um die id-img für die Kompatibilität mit Opera. Jetzt ist es in Ordnung, die in IE6-7-8-9, Opera, Firefox, Chrome & Safari.
    InformationsquelleAutor strauberry
Schreibe einen Kommentar