Ich bin's wieder - Neele von vanillebrause :) Heute möchte ich euch erklären, wie ihr den sogenannten Hover- oder Mouseover-Effekt verwirklicht. Im Prinzip geht es einfach nur darum, dass ein Bild zu einem anderen wechselt, wenn man mit der Maus drüberfährt.
Das ist zum Beispiel nützlich, wenn ihr Social Media Buttons auf eurem Blog eingebunden habt und möchtet, dass diese die Farbe wechseln, wenn man mit der Maus drüberfährt oder aber dass sie den Hintergrund wechseln. Der Kreativität sind keine Grenzen gesetzt!
1. Schritt:
Ihr benötigt eine Art Kopie eures Bildes, das ihr verwenden wollt, bei der dann zum Beispiel die Farbe anders ist oder irgendetwas hinzugefügt wurde, wie zum Beispiel Text.
2. Schritt:
Nun legt ihr entweder ein HTML-Widget in eurer Sidebar an oder fügt den folgenden Code einem HTML-Widget eurer Sidebar hinzu:
Das Ganze könnt ihr dann auch noch verlinken, zum Beispiel mit eurer Facebook-Page oder eurem Bloglovin-Link, dann würde der Code, den ihr einfügt, so aussehen:
Ihr benötigt eine Art Kopie eures Bildes, das ihr verwenden wollt, bei der dann zum Beispiel die Farbe anders ist oder irgendetwas hinzugefügt wurde, wie zum Beispiel Text.
|  |
| Bild1 | Bild2 |
2. Schritt:
Nun legt ihr entweder ein HTML-Widget in eurer Sidebar an oder fügt den folgenden Code einem HTML-Widget eurer Sidebar hinzu:
<img src="URLVONBILD1" onmouseover="this.src='URLVONBILD2'" onmouseout="this.src='URLVONBILD1'"/>3. Schritt:
Das Ganze könnt ihr dann auch noch verlinken, zum Beispiel mit eurer Facebook-Page oder eurem Bloglovin-Link, dann würde der Code, den ihr einfügt, so aussehen:
<a href="DEINLINK">
<img src="URLVONBILD1" onmouseover="this.src='URLVONBILD2'" onmouseout="this.src='URLVONBILD1'"/>
</a>
Hier dann nochmal das Resultat: (mit der Maus drüberfahren!)
Wie mache ich davon mehrere nebeneinander? Also das Tutorial habe ich verstanden, aber wenn ich sowas einbinden möchte und will, dass alle Buttons nebeneinander sind. - Wie mache ich das. Ich kann keine 2 HTML-Widgets nebeneinander machen und wenn ich sie untereinander mache, dann ist der Abstand immer relativ groß. Zu Hilfe...! :D :D
AntwortenLöschenLiebe Grüße, Miss B.
Du machst einfach mehrere img-tags in ein HTML-Widget ;)
LöschenAh, cool... das probiere ich mal aus! Vielen Dank! :D
LöschenLeider klappt es nicht. Ich habe die Bilder in mein picasa-Webalbum hochgeladen und dann die URL verwendet, aber es funktioniert nicht. Da kommt dann nur so ein "kann nicht angezeigt werden Bild" aber die Verlinkung geht.
LöschenWie komme ich an eine URL des Bildes, die funktioniert?
Hey, ich habe den Effekt auch schon vor langer Zeit in meinen Blog (Sidebar) eingebaut und finde ihn wirklich super. Nur leider dauert es ein bisschen bis die Bilder sind ändern. Weißt du woran das liegen kann ?
AntwortenLöschenLiebste Grüße und schön erklärt
Hannah ♥
Das liegt daran, dass deine Bilder einfach zu groß sind und der Browser sie erstmal laden muss. Ich kann dir das gif-Format ans Herz legen, ist zwar qualitativ geringer als jpg, aber von der Bitzahl her kleiner gehalten :)
LöschenEs gibt noch die Möglichkeit ein einziges Bild zu benutzen, in dem beide Einzelbilder integriert werden. Es wird aber nur der eine Teil angezeigt und beim Hover wird das Bild verschoben, dass man den anderen Teil sieht.
LöschenDadurch gibt es keine Verzögerung.
zB wie hier: http://kyleschaeffer.com/user-experience/pure-css-image-hover/
So ein Tutorial gibt's doch schon http://www.copypastelove.org/2011/11/bildwechsel-bei-mouseover.html
AntwortenLöschenJedoch sind da die Bilder gesperrt, also ist das Tutorial hier dann doch besser ... Wollte ich nur kurz aufmerksam machen :D
Alles Liebe!
Die Idee ist gut, aber es ginge noch mit weniger Bildmaterial, dann wäre es vor allem für Leute wie mich einfacher, wenn man dauernd die Farben ändern möchte, wär mir das zu umständlich. Man müsste das Symbol in einem Pseudoelement platzieren.
AntwortenLöschenIch war grad gelangweilt und hab's ausprobiert.
Vielleicht interessiert es ja jemanden.
<!--Code-->
<div class="social"><a href="http://myriamfrisano.blogspot.ch/feeds/posts/default"></a></div>
<style>
.social{
width: 50px;
height: 50px;
position: relative;
background: #333;
z-index: 0;
border-radius: 3em;
}
.social:hover{
background: #aaa;
}
.social:before{
content:"";
position: absolute;
width: 30px;
height: 30px;
top: 10px;
left: 10px;
z-index: 10;
background: url(http://4.bp.blogspot.com/-w-GdcFSbT4Y/UT4WF7KaOxI/AAAAAAAAFkw/VF9U877NkEU/s1600/rss.gif);
}
</style>
danke myri,
Löschenfreue mich dich mal wieder zu lesen.
grüßle flo
ps. vermisse deine seite immer noch ;-)
Genau genommen bräuchte man überhaupt keine zusätzlichen Bilder ... das geht auch mit reinen CSS-Filter :). Rechts oben die social Buttons sind etwa so gemacht.
LöschenIm übrigen schön mal wieder was von dir zu hören :D ^^
Stimmt, ich hab's bei mir auch ohne Bilder gemacht, aber wenn man halt die Symbole haben will... ich glaub zwar das RSS-Logo liesse sich sicher auch mit reinem CSS machen, oder? Man kann ja so einiges damit ;D
LöschenMuss ich mal ausprobieren, wenn ich Zeit finde.
Schön auch von dir mal wieder zu lesen ^^
Waah, das Tutorial find ich ja mal toll. Und liebe Myri, danke für den Tipp. das werde ich endlich mal ausprobieren...
AntwortenLöschenCooles Tutorial! Mich würde noch interessieren, wie das mit dem "Aufschieben" funktioniert, so wie zum Beispiel auf dieser Seite bei der linken Navigation =)
AntwortenLöschenLiebe Grüße,
Eleonora
♥ Mein Blog ♥
Dazu gab es erst kürzlich 2 Tutorials hier, schau mal nach den "Accordions"
Löschenja,
AntwortenLöschenson effekt hat was, keine frage.
grüßle flo
Super Anleitung, das muss ich mal unbedingt austesten und es scheint auch gar nicht so kompliziert. :)
AntwortenLöschenIch habe auch noch mal eine Frage, die ich irgendwie schon tausendmal gelöst habe, jetzt aber plötzlich nicht mehr hinbekomme:
AntwortenLöschenwoher bekomme ich die URL meines Bildes?
Bin für jeden Tipp dankbar,
ich steck grad echt in der Klemme :D
Das Tutorial ist toll, wirklich schön erklärt :)
Versuchs mal indem du auf dein Bild rechtsklickst und dann "bild anzeigen" oder "bild in neuem tab öffnen" oder so ähnlich anklickst, dann erscheint die url des bildes in deiner browserleiste :)
LöschenCooler Blog! Macht weiter so! Hab hier einige sehr interessante Infos gefunden. LG
AntwortenLöschenbei mir funktioniert es nicht wollte mein eigenes bild nehmen aber es klappt nicht-_-
AntwortenLöschenentwarnung es geht doch :D
AntwortenLöschenHallo!
AntwortenLöschenVielen Dank für dieses super Tutorial. Hab's auch gleich umgesetzt und es hat geklappt. Ich hab nur ein kleines Problem: Beim "mouseover" erscheint rechts unten am Buttonbildchen ein dünner schwarzer Strich, obwohl im Originalbild dort keins ist. Kann mir jemand sagen, was das ist und wie ich's weg bekomme? ^^
Liebe Grüße,
Lucia
ha! hat funktioniert nur hab ich bei den proportionen was falsch gemacht, jetzt wackelts haha :D
AntwortenLöschenhttp://thisbirdhasflown-lin.blogspot.de/
Danke danke danke ! Ihr helft mir alle so weiter mit euren Tutorials. :*
AntwortenLöschenMuchas Gracias... das ist wieder eines der wundervollen Tutorials, die auch bei mir funktioniert haben... danke schön und Liebe Grüße
AntwortenLöschenAnnie von ♥ Annies Beauty House ♥
Danke! genau das habe ich gerade gesucht:)
AntwortenLöschenWie kriege ich das hin, dass die nicht die Farbe ändern sondern transparent werden? Vielen dank im Vorraus für die Hilfe
AntwortenLöschenIch wollte diesen Effekt gerne im Postbereich benutzen nur leider funktioniert das nicht...gibt es da noch einen speziellen Kniff?
AntwortenLöschenLiebe Grüße Janina