Grafik austauschen

Verfasst von Alice am 17.06.2008 - wurde schon 11230 mal gelesen

Kategorie: JavaScript

Bewertung:

5x bewertet

Schwierigkeit: einfach
Kommentare: [ 2 ]

keine ...

Grafik austauschen - Tutorial

Im Forum wurde gefragt, wie man es anstellt,
dass sich eine Grafik beim Ueberfahren mit der Maus austauschen laesst,
hier also nun eine kurze Erklaerung dazu ...

Beispiel anschauen

Eigentlich brauchen wir dazu nur 2 Event-Handler

- OnMouseOver (beim Ueberfahren des Elements mit der Maus)
- OnMouseOut (beim Verlassen des Elements mit der Maus)

Der Event-Handler onmouseover kommt immer dann zum

Einsatz, wenn etwas passieren soll, wenn man mit der Maus ueber ein bestimmtes Element faehrt, meist ist dieses Element ein Verweis <a>.

Der Event-Handler onmouseout kommt immer dann zum Einsatz,

wenn etwas geschehen soll, wenn man mit der Maus ueber einen Element faehrt, und dann die Maus wieder woanders hinbewegt.

Fangen wir also an ...

Wir benoetigen zu erst einmal einen <img> Tag, womit wir die Grafik definieren, die ausgetauscht werden soll, dieser Grafik weisen wir einen Namen zu, indem wir das Attribut name="Bezeichnung" vergeben.

Ich taufe den <img> Tag jetzt einfach mal auf den Namen grafixx, die Bezeichnung bleibt jedem selbst ueberlassen, sie sollte aber keine Leer- oder Sonderzeichen enthalten!

Kommen wir nun zum JavaScript-Teil

Dieses sieht wir folgt aus:

<script type="text/javascript">

	image0 = new Image;
	image0.src = "http://alice-grafixx.de/images/grafix/alice-grafixx_88.jpg";
	
	image1 = new Image;
	image1.src = "http://alice-grafixx.de/images/grafix/alice-grafixx_88_1.jpg";

	image2 = new Image;
	image2.src = "http://design-grafixx.com/wp-content/uploads/2008/05/dg_button_02.jpg";

	image3 = new Image;
	image3.src = "http://unnecessary.de/unnecessary.jpg";

	image4 = new Image;
	image4.src="http://i4.photobucket.com/albums/y103/Alicesp/sweet.jpg";

</script>

Mit image0 = new Image; erzeugen wir ein neues Grafik-Objekt, dem wir einen eindeutigen Namen zuweisen.

Der Name lautet hier image0, diesem Grafik-Objekt weisen wir mittels Objekteigenschaft src eine Grafikdatei zu image0.src=
"http://alice-grafixx.de/images/grafix/alice-grafixx_88.jpg";

Das Selbe machen wir fuer alle anderen Grafiken auch, welche zum Austausch bereit stehen sollen.

Erst wird das Grafik-Objekt erzeugt mit image1 = new Image;

Danach wird diesem eine Grafik zugewiesen image1.src = "http://alice-grafixx.de/images/grafix/alice-grafixx_88_1.jpg";

Dieser JavaScript-Teil am besten in den <head> Bereich der Website stecken, dort stoert er nicht. Da es sich hierbei aber um keine Funktion handelt, kann der JavaScript-Teil auch in den <body> Bereich einer Webseite gesteckt werden.

Die Links

Okay, die Grafiken haetten wir nun definiert, kommen wir nun zu den Links, die dafuer zustaendig sind, dass sich die Grafik, beim Ueberfahren eines Links veraendert.

Ein Link ist folgendermassen aufgebaut

<a onmouseover="document.grafixx.src=image1.src" onmouseout="document.grafixx.src=image0.src" href="http://alice-grafixx.de">Linkbezeichnung</a>

Wie zuvor schon erwaehnt, ist onmouseover fuer das Ueberfahren eines Elements zustaendig, fuer welches Element wir diesen Event-Handler einsetzen moechten definieren wir mit document.grafixx, grafixx ist ja der Name unserer Grafik, die ausgetauscht werden soll.

Und welcher Grafik, statt der im <img> Tag definierten, nun angezeigt werden soll, definieren wir mit src=image1.src,
image1 ist eine der Grafik-Objekte, die wir oben im JavaScript-Teil bestimmt haben, hier waere es also nun 'http://alice-grafixx.de/images/grafix/alice-grafixx_88_1.jpg'

Mit onmouseout="document.grafixx.src=image0.src" bestimmen wir nun noch die Grafik, die angezeigt werden soll, wenn die Maus den Link wieder verlaest, ohne diesen anzuklicken.
Das image0 waere also hier die Grafik 'http://alice-grafixx.de/images/grafix/alice-grafixx_88.jpg'

Jeder Link, der die Eigenschaft haben soll, die Grafik zu tauschen, muss also den Event-Handler onmouseover sowie onmouseout enthalten...

<ul>
<li>
<a onmouseover="document.grafixx.src=image1.src" onmouseout="document.grafixx.src=image0.src" href="http://alice-grafixx.de">
Alice-Grafixx - GFX Community</a> 
</li>

<li>
<a onmouseover="document.grafixx.src=image2.src" onmouseout="document.grafixx.src=image0.src" href="http://design-grafixx.com">
Design-Grafixx - WordpressThemes</a> 
</li>

<li>
<a onmouseover="document.grafixx.src=image3.src" onmouseout="document.grafixx.src=image0.src" href="http://unnecessary.de">
Unnecessary - Simply Portfolio</a> 
</li>

<li>
<a onmouseover="document.grafixx.src=image4.src" onmouseout="document.grafixx.src=image0.src" href="http://sweet-pearls.com">
Sweet-Pearls - Perser & Exotic</a>
</li>
</ul>

Tutorial Dateien herunterladen

Hinweis: Dieses Tutorial wurde am 07.04.2012 vom Autor ueberarbeitet...

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...