Freitag, 23. September 2011

Mouseover

WortSchmid hat in ihrem Beitrag Blätter... ein Bild gebracht, welches sich verändert, wenn man mit der Maus drüber fährt (genannt mouseover). Also etwa so (beweg den Mauszeiger zwischen den Elephanten und die Ente):


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:
  1. 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.
  2. 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.
Der gezeigte Code kommt übrigens von Terry's Playpen, aber ich habe ihn anders und vor allem auf Deutsch erläutert.

Ich hoffe Ihr erlebt mit den mouseovers viele kleine freude.li.

8 Kommentare:

  1. Lieber Hanspeter,

    ich hab's kapiert! Vielen lieben Dank dafür, dass Du Dir die Mühe gemacht hast!
    Ich werde es bei der nächsten fotografischen Gelegenheit ausprobieren.

    Liebe Grüße.li
    Nikola;)

    AntwortenLöschen
  2. Das ist ja cool! Ich glaub ich hab das verstanden :o)

    Danke!

    AntwortenLöschen
  3. Danke für diese Anleitung.
    Jetzt kann ich es (leider) ohne Dich! ;-)

    AntwortenLöschen
  4. ...danke für die Anleitung,
    das muß ich unbedingt mal ausprobieren...

    lieber Gruß von Birgitt

    AntwortenLöschen
  5. ...habe gerade festgestellt, dass der Html Code des Bildes auch unten auf dem Bildschirm erscheint,
    wenn ich mit der Maus drauf gehe,
    so kann ich ihn also ganz leicht finden...

    AntwortenLöschen
  6. Bin über Birgitt zu dir gekommen und danke auch für die Anleitung.
    Anette

    AntwortenLöschen
  7. Auch ich danke für die Anleitung, ist sogar mir gelungen. Liebe Grüsse aus Wien

    AntwortenLöschen
  8. Dieser Effekt ist mir noch aus den Webseitenanfängen um das Jahr 2000 herum bekannt. Irgendwann folgte eine Phase, in der alles Zappelnde und Wackelnde (wie auch animierte Gifs) nicht mehr so beliebt waren. Von daher hat das Ganze stark abgenommen. Aber - sparsam eingesetzt - ist es doch immer einmal wieder nett

    Habe diesen Blog gerade über einen anderen Blog gefunden.

    Herzliche Grüße
    Sara

    AntwortenLöschen