HpBk-TemplateWorld

Hover Effekt

Bild/Grafik mit einfachem Hover-Effekt

Einleitung

Ein Hover-Effekt ist immer etwas Besonderes. Man fährt mit der Maus beispielsweise über ein Bild und dann sieht der Besucher eurer Webseite einen tollen Effekt. Hover-Effekte kann man auf die unterschiedlichsten Arten und Weisen einfügen. Weitere tolle Möglichkeiten findet ihr im großen Baukasten-Forum.

Schwierigkeitsstufe: Anfänger

Ich bevorzuge jedoch diese Möglichkeit, da sie schnell und simple ist.

Dieser Code muss unter "Seiten" auf der gewünschten Seite im Quellcode eingefügt werden.

<img src="http://www.DEINE-BILD-URL-HIER.png" onmouseover="this.src='http://www.DEINE-BILD-HOVER-EFFEKT-URL-HIER.png';" onmouseout="this.src='http://www.DEINE-BILD-URL-HIER.png';" />

Wenn ihr diesen Code bei euch einfügt, müsst ihr bei der ersten URL das Bild einfügen, das der Besucher als erstes sieht. Also das Grundbild sozusagen. Die zweite URL gibt den Hover-Effekt an, also den Effekt, wenn der Besucher mit der Maus über das Bild fährt. Und die dritte Bild-URL entspricht wieder der ersten Bildgrafik.

Ganz einfach, oder? Und so sieht das Ganze dann aus. Fahre mal mit der Maus über das Bild.

Bild mit Verlinkung

Natürlich könnt ihr dieses Bild auch verlinken. Die Verlinkung wird sofort aktiv. Sobald jemand auf das Bild klickt, gelangt er dann zur Ziel-URL, die ihr angegeben habt.
Code für Hover-Effekt mit Verlinkung:

<a href="http://hier-ein-HOMEPAGE-link.htm"><img alt="" src="https://img.webme.com/pic/h/hpbk-templateworld/hovererstes.png" onmouseover="this.src='https://img.webme.com/pic/h/hpbk-templateworld/hoverzweites.png';" onmouseout="this.src='https://img.webme.com/pic/h/hpbk-templateworld/hovererstes.png';" /></a>

Kommentare zu dieser Seite:

Kommentar von:	02.05.2012 um 14:32 (UTC)
(gesperrter Nutzer)	gut aber wie amcht man so das die texte nach rehcts laufen?

Kommentar von:	14.11.2011 um 20:59 (UTC)
d4y Offline	Kann, ich das Bild auch noch verlinken??

Kommentar von:	09.11.2011 um 18:22 (UTC)
4354345435435345 Offline

Kommentar von:	31.03.2011 um 15:42 (UTC)
(gesperrter Nutzer)	ist ja LoL das ist genau das richtige für meine HP

Kommentar von:	12.03.2011 um 20:39 (UTC)
(gesperrter Nutzer)	Klasse, Hat bei mir Auf Anhieb geklappt, Auch ohne, dass ich das CSS Design einstellen musste.

Kommentar zu dieser Seite hinzufügen: