Der Trick mit dem Mausepfeil

Vorn hab ich ja ein paar 'Trickbilder' erzeugt: Immer wenn Sie mit der Maus über Einstein, den hüpfenden Kreis oder den gelben Pfeil geraten, ändert sich das Bild.

 

Wie geht das?

 

Nun - tatsächlich nur mit programmieren! Dabei hatte ich Ihnen versprochen, dass wie genau das nicht machen werden. Ist aber ganz einfach:

 

 

 

 

#1 Schritt Lagern

Der Trick heisst technisch 'onMouseOver' - d.h. auf Deutsch "Wenn die Muas drüber ist" … Programmierer haben Humor und 'ne lustige Ausdrucksweise, oder?

 

In Klartext bedeutet das: Bewegt der Besucher Ihrer Webseite die Maus, genauer den cursor über das Bild, wird ein anderes angegzeigt!

 

Beim Einstein sieht man das ganz gut: ohne Maus=schwarz/weiß, mit Maus=Rote Zunge

 

Wir benötigen also ZWEI Bilder; und wie immer, nicht Zuhause, sondern im Internet. Vorschlag: Auf IHRER Webseite!

 

Ich habe die Bilder auf eine VERSTECKTE Unterseite gelagert... Nur ich weiß, wo die ist, Sie jetzt auch:

 

http://karstensch.jimdo.com/test/

 

 

 

 

#2 Schritt Programmieren

Jetzt nicht erschrecken - Sie Programmieren jetzt! … naja, eigentlich machen Sie nur copy/paste … und zwar folgende Zeile 

 

<img src="Bild1" onmouseover="src='Bild2'" onmouseout="src='Bild1'" />

 

Da steht, in 'Mensch':

Die img src = image source = Bild-Quelle ist Bild1

onmouseover = fährt die Maus 'rüber ist die src=source=Quelle Bild2

onmouseout = ist Maus wieder weg ist src=source=Quelle Bild2

 

So.

Woher weiß der Computer, was Bild1 oder Bild2 ist?

Indem Sie die URL einkopieren!

 

• Öffnen Sie bitte in einem 2ten Tab Ihre Bilderseite aus Schritt #1 … 

 

•  clicken Sie unten Rechts auf ANSICHT

 

• links-click (oder auch ctrl-click) Sie auf das ERSTE Bild und wählen Sie 'Bildadresse kopieren'

 

• kehren Sie zurück auf die Seite, wo Sie gerade 'programmieren'

 

• doppelclicken Sie das Wort Bild1, sodass es angewählt ist

 

• strg-v wie einVügen, fügt die URL ein!

 

• wiederholen Sie dies für das zweite 'Bild1' in der Programmierzeile

 

• Gehen Sie zu dem Tab mit Ihrem Bild, links-click (oder ctrl-click) auf das ZWEITE Bild, wählen Sie 'Bildadresse kopieren'

 

• kehren Sie zurück auf die Seite, wo Sie gerade 'programmieren'

 

• doppelclicken Sie das Wort Bild2, sodass es angewählt ist

 

• strg-v wie einVügen, fügt die URL ein!

 

SPEICHERN unten anclicken.... Pfffff, das war Arbeit!

 

#3 Test, Test, Test!

Solange Sie im Bearbeitungs-Modus sind, passiert nix - nicht wundern!!

 

Erst wenn Sie unten rechts ANSICHT wählen,werden diese Tricks&Kniffe sichtbar!

 

Wenn es nicht klappen sollte wiederholen Sie bitte alle Schritte! Vor allem die Programmierzeilel hat ihre Tücken - da sind winzigkleine ' neben " … das sieht man kaum, ob das nun " oder '" ist .... macht aber den Unterschied.

 

#4 Jetzt wie die Profis: …

Im Falle des Pfeils würde sich ja anbieten, dass auch etwas 'passiert', wenn man nicht nur mit der Maus drüber fährt, sondern 'clickt'… das geht!

 

Und zwar müssen Sie aus dem Bild einen link machen… naja, programmieren: 

 

<a href="Link"><img src="Bild1" " onmouseover=
"src='
Bild2'" onmouseout="src='Bild1'" /></a>

 

Vergleichen Sie: VOR dem 'img src' steht ein neuer Befehl:

a href= a hyper text reference = eine Hypertext Referenz = ein link

 

Fügen wir links ein, steht im sog. Quell-Text vor jedem link 'a href' - dann weiß der Computer "ah, ok, alles was jetzt kommt ist ein link" … ehm? Alles? Ja, alles bis

</a>

Der schräge Strich heisst 'aus'. 

 

Das fette Link müssen Sie natürlich noch durch eine URL ersetzen.

 

Da oben steht also: "Das Nachfolgende ist ein link, und zwar zu ... wobei das, was der link sein soll, ein Bild ist (und dieses Bild sich bei mouseover auch noch verändert!) … und aus"