Bilder hovern ohne JavaScript
Auf Text oder Bild hovern
einfache anleitung mit code
Sie möchten, dass sich beim Mouseover das Bild auf ein anderes Bild oder auf einen Text wechselt? Möglichst nur mit Html und Css? Das geht, und zwar ganz einfach.
Beispiel Hovern auf Text
Hier der Code, den Sie direkt ins img schreiben können:
So geht's
Zuerst bereiten wir zwei Bilder in gleicher Grösse vor. Auch der Hoverbereich mit Text besteht aus einem Bild. Kann man in Photoshop oder jedem anderen Grafikprogramm machen.
Die zwei Bilder werden jeweils unter anderem Namen abgespeichert. Bei mir ist das Bild in images/tipps/... unter dem Namen "abendstimmung" abgespeichert. Das Hoverbild erhält den Zusatz "text".
Beispiel Hovern auf schwarzweiss Bild
Der Code bleibt derselbe, nur die Bilder werden mit anderem Namen abgespeichert, folglich auch unter dem jeweiligen Namen, wo Sie Ihre Bilder speichern, ins Html notiert.
Das orange Landschaftsbild (landscape) habe ich normal unter img eingebunden und für das schwarzweisse Hoverbild mit dem Zusatz: ...onmouseover="src='images/tipps/landscape-sw.jpg... versehen.
Beispiel Hovern auf grösseres Bild mit Rahmen
Selbstverständlich kann das Hoverbild zusätzlich verlinkt werden.
Übrigens, eine Anleitung, wie man so schicke Rahmen mit und ohne Effekte macht, habe ich auf folgender Seite erklärt:
> www.rahmen-um-bild.org
Mehr Internet-Tipps
Hilfreiche Artikel für das Arbeiten im Netz
Wie kann ich im Internet Geld verdienen?
Eine Frage, die viele brennend interessiert. Die meisten Menschen wünschen sich einen Nebenverdienst. Im Internet, oder Online, gibt es heute viele verschiedene Möglichkeiten. Seriöse und unseriöse. Auf folgender Seite stelle ich Ihnen einige vor:
> Geld verdienen im Internet
Markennamen auf Internet-Seiten - in Url's
Ist das erlaubt oder verstosse ich damit gegen Rechte und Gesetze? Und wie steht es mit Bild und Text? Antworten auf folgender Seite:
> Markennamen auf Internetseiten
Webseite selber erstellen
Cms, Vorlage oder Baukastensystem nehmen, Technik selber machen oder Webdesigner beauftragen? Unterschiede, Vor- und Nachteile erörtere ich Ihnen auf folgender Seite: