 |
Dieser Effekt ist ganz einfach hinzubringen. Beim Erstellen des Blogeintrags auf blogspot müsst Ihr einfach auf "HTML bearbeiten" clicken und den folgenden mouseover-Code reinkopieren:
<table align="center"><tr><td align="center">
<img onmouseover="Javascript: this.firstsrc=this.getAttribute('src');
this.secondsrc='http://4.bp.blogspot.com/-m6-Trb-G8Qw/TnyYZzSO_hI/
AAAAAAAAAAo/siei15bFCS0/s1600/mit_maus.jpg';
this.setAttribute('src',this.secondsrc);" onmouseout="Javascript:
this.setAttribute('src',this.firstsrc);" alt=""
src='http://4.bp.blogspot.com/-kkygV0JK4NI/TnyYaBdtNCI/AAAAAAAAAAs/
QFqoyAohJPU/s320/ohne_maus.jpg' />
</td></tr></table>
|
Das ist eigentlich schon alles!
Ausser einem kleinen Detail: wenn Ihr jetzt hingeht, und obigen Code bei Euch einfügt, kriegt Ihr meine zwei Bilder in Eurem Blogeintrag. Ich bin sicher: auch Ihr liebt die Maus und den Elephanten! Wahrscheinlich sind Euch aber eigene Bilder trotzdem lieber.
Hier kommt nun das Problem, dass blogspot einem Bild, das Ihr hochlädt, einen ziemlich zufällig aussehnenden HTML-Link zuteilt, und den müsst Ihr zuerst herausfinden. Ich habe das für diesen Blogeintrag ganz einfach so gemacht: zuerst beide Bilder als normale Bilder hochgeladen und untereinander in diesen Beitrag eingefügt:
Dann auf "HTML bearbeiten" umgestellt und angeschaut, mit welchem Code blogspot meine Bilder anzeigen will:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-m6-Trb-G8Qw/TnyYZzSO_hI/ AAAAAAAAAAo/siei15bFCS0/s1600/mit_maus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="http://4.bp.blogspot.com/-m6-Trb-G8Qw/TnyYZzSO_hI/ AAAAAAAAAAo/siei15bFCS0/s320/mit_maus.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-kkygV0JK4NI/TnyYaBdtNCI/AAAAAAAAAAs/ QFqoyAohJPU/s1600/ohne_maus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="http://4.bp.blogspot.com/-kkygV0JK4NI/TnyYaBdtNCI/AAAAAAAAAAs/ QFqoyAohJPU/s320/ohne_maus.jpg" width="320" /></a></div> |
Und dann bin ich hingegangen und habe die rot dargestellten Links der zwei Bilder ganz einfach an die entsprechenden Stellen im obigen mouseover-Code kopiert.
Achtung! Zwei sehr wichtige Dinge:
- Im Code für's Bilderanzeigen sind die Links in "doppelten Anführungszeichen"; im mouseover-Code in 'einfachen Anführungszeichen'. Das darf nicht geändert werden, doppelte Anführungszeichen funktionieren an dieser Stelle im mouseover-Code nicht.
- Das mouseover funktioniert in der blogspot-Vorschau auch nicht. Ihr musst hier blind auf die Technik vertrauen: wenn der Post veröffentlicht ist, geht es dann schon.
Ich hoffe Ihr erlebt mit den mouseovers viele kleine freude.li.