A:hover Effekt

Computer: Software & Programmierung HTML & CSS
#1

Hallo miteinander

Ich habe da einmal eine Frage: Und zwar möchte ich auf meinem Portfolio die Navigation mit Bilder machen. Nun möchte ich, dass als hover Effekt, sich die Farbe ändert & von unten ein feiner Lichstrahl erscheint.

Nun könnte ich natürlich immer ein anderes Bild laden, was ich aber möglichst umgehen möchte. Ich habe schon Beispiele gesehen, wo Personen ein grosses Bild für die komplette Navigation hatten und dieses mit background-positon versetzt haben (wenn ich das so richtig interpretiert habe…?)

Nun zur Frage: Wie kann ich oben Beschriebenes am proffesionelsten umsetzen? Es soll also eine Navigation mit Bildern erstellt werden, welche sich bei Mauskontakt ändert, ohne das der User etwas mitbekommt, dass etwas geladen wird?

Ich hoffe ihr versteht, was ich sagen möchte, ansonsten stehe ich für weitere Fragen natürlich zur Verfügung.

Vielen Dank für eure Hilfe

#2

++++ UPDATE ++++

Hab’s inzwischen selber herausgefunden. Das Ganze wurde mit jQuery realisiert. Für die, die so etwas ebenfalls suchen:

http://spoonfedproject.com/jquery/jquery-image-slide…

Greez

Ps. Wenn so etwas trotzdem in CSS realisierbar wäre (was ich nicht vermute), lass ich mich gerne belehren.

#3

Hab’s inzwischen selber herausgefunden. Das Ganze wurde mit
jQuery realisiert. Für die, die so etwas ebenfalls suchen:
http://spoonfedproject.com/jquery/jquery-image-slide…

Hallo,

was aber ist, wenn das Design oder JavaScript (oder beides) abgeschaltet ist bzw beim Endgerät gar nicht ausgewertet wird? Ich sehe im gegebenen Beispiel große Grafiken, die beide (vermutlich zu scrollende) Varianten zeigen.

Ansonsten ist dieser Effekt bei eingeschaltetem CSS und JavaScript schick - funktioniert aber eben nicht bei jeder Besucherin.

Ps. Wenn so etwas trotzdem in CSS realisierbar wäre (was ich
nicht vermute), lass ich mich gerne belehren.

Hier ein kleines Beispiel, wie ein einzelnes Bild in einem Hyperlink beim Hovern verschoben werden könnte:

a {background-image: url(bild.png);
 background-position: top;
 }
a:hover {background-position: bottom;
 }
 Hovereffekt mit einem einzelnen Hintergrundbild: [Klick hier](%23)

Speichere im selben Verzeichnis wie diese HTML-Datei ein Bild „bild.png“ ab und es wird im Link zuerst mit der Oberkante angeeigt, beim Hovern mit der Unterkante. Es sieht also aus, als ob das Bild wechselt, obwohl es dasselbe Bild bleibt.

Allerdings ist dies dann kein weiches Verschieben wie bei deiner JavaScript-Variante, sondern ein abruptes „Umklappen“ des Bildes.

Schlecht wäre es bei dieser Lösung, ausschließlich mit den Hintergrundbildern zu arbeiten und womöglich auf Hyperlinktext zu verzichten. Auch hier gilt nämlich. Ob das Bild beim Anwender angezeigt wird, entscheidet er selbst (oder in Vertretung sein Browser). Ein sinnvoller textlicher Inhalt (wie z.B. oben „Klick hier“) gehört zwingend in einen Link hinein.

Gruß
A