Mittel bis einfach - Genau beschriebene HTML-Codes

1. Was ihr braucht:

Zwei Grafiken, eine die standardmäßig erscheint und eine, die beim Überfahren des Bilds mit der Maus angezeigt wird. Es empfiehlt sich beim Mouseover-Bild nur kleine Änderungen wie z.B. die Farbe oder Text zu machen.

Beispiel für das Bild oben

2. Hochladen

Erstellt eine versteckte Seite (oder nutzt eine vorhandene). Dort erstellt ihr ein Bild-Modul und ladet zuerst das Standardbild hoch, also das, welches ohne Mouseover angezeigt wird. Speichern.

Darunter erstellt ihr ein zweites Bild-Modul und ladet das zweite Bild, also die Mouseover-Grafik hoch.

Jetzt geht ihr in den Ansichts-Modus der versteckten Seite und kopiert beide Links in ein Textdokument: Rechtsklick auf das Bild > Eigenschaften > Die Bild-URL herauskopieren. Alles was nach der Dateiendung (wahrscheinlich .jpg) kommt, löscht ihr

3. Einbauen

Fügt folgenden Code in ein HTML-Objekt ein (dort, wo das Objekt erscheinen soll):

<a href="Link"><img src="Standardbild" alt="" onmouseover=
"src='Mouseoverbild'" onmouseout="src='Standardbild'" /></a>

Link: Falls das Bild verlinken soll, den Ziel-Link hier einfügen

Standardbild: Bild-Adresse des ersten hochgeladenen Bildes

Mouseoverbild: Adresse des Bilds das beim Mouseover erscheinen soll

4. Preload (optional)

Eigentlich ist das ganze schon fertig, doch wir setzen noch einen drauf: Damit man die Maus nicht erst lange auf das Bild halten muss, bis die Mouseover-Grafik lädt, lassen wir sie vorher laden. Dazu diesen Code in ein neues HTML-Objekt unter dem Bild einfügen:

<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- hide from none JavaScript Browsers

Image1 = new Image(570,150)
Image1.src = "Mouseoverbild"

// End Hiding -->
//]]>
</script>

Mouseoverbild: Wieder Link zum Mouseoverbild (s.o.)

570,150: Länge und Breite des Bilds

1: Hier müsst ihr durchnummerieren. Jedes Mouseover-Objekt eine neue Nummer