Bildwechsel (mouse over) html Tutorial by jimdo page award


Wir selber verwenden den mouse over Effekt sehr gerne, denn der User erfährt schnell und einfach was er gerade anklickt. Außerdem kann man damit tolle Effekte zaubern. Bei diesem Effekt ist allerdings darauf zu achten, dass man nur z.B. eine Farbe ändert oder einen Effekt von bunt zu grau oder von grau zu bunt.        Der mouse over Effekt sollte immer Dezent gehalten werden.


MouseOver - Generator:


Um euch das Leben eifacher zu machen und damit es auch noch schneller geht haben wir uns jetzt dafür entschieden unseren MouseOver Generator online zu stellen. Dieser erstellt euch nicht nur automatisch den MouseOver-HTLM-Code, sondern zeigt euch auch noch an, wie dieser dann auf euer Website später aussehn wird. Was haltet Ihr von dieser Idee? Schreibt uns es einfach in die Komentare ->



Deine URL:
1.Bild (Standartbild):
2.Bild (MouseOver-Bild):

Füge diesen HTML-Code in deine Jimdo Page ein.

Like unsere Seite, DANKE :)




1. Grafiken die Ihr verwenden wollt auswählen / Theorie

 

Um einen mouse over Effekt zu erstellen, braucht Ihr erstmal zwei Bilder, denn am Anfang soll ja ein Bild angezeigt werden und beim Überfahren des Bildes mit der Maus soll dann der mouse over Effekt kommen, der dann dann ein anderes Bild anzeigt. Und wenn man die Maus wieder von dem Bild wegfährt soll wieder das Bild angezeigt werden, welches am Anfang gesehen hat. So weit erstmal zur Theorie. Den mouse over Effekt sollte man allerdings gezielt einsetzten. Zum Beispiel verwenden wir Ihn für unsere Navigation oder falls dem User sofort auf fallen soll, was passiert, wenn er auf das Bild klickt.

 

2. Hochladen & Vorbereitung für den Einbau

 

Nachdem wir dir jetzt erklärt haben wie unserer mouse over Effekt in der Theorie funktionieren soll, geht es jetz an das Erstellen des Effektes.

 

Dafür erstellt Ihr eine versteckte Seite, auf der Ihr alle eure Bilder hochladet, die Ihr öfters benutzt (falls Ihr schon eine habt, könnt Ihr natürlich auch diese benutzen). Auf der versteckten Seite, die Ihr zum Speichern der Bilder für den mouse over Effekt gewählt habt, ladet Ihr mit dem Bild-Upload-Modul von Jimdo die zwei Bilder hoch die Ihr für den mouse over effekt verwenden wollt. Achtet dabei darauf, dass die Bilder gleich groß sein müssen! Das eine ist euer normales Anzeige-Bild und das andere euer mouse over Bild.

 

Dann kopiert Ihr die Links bzw. die URL der beiden Bilder, die Ihr gerade hochgeladen habt und speichert Sie z.B. in einer Word Datei.

 

3. Einbauen & FERTIG!

 

Jetzt sind wir schon fast fertig, du musst nur noch in den follgenden Code die Links / URLs und den Link auf welche Seite du verlinken willst eingeben und schon bist du fertig.

 

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

 

Link: Hier kannst du die Bilder bzw. das Modul verlinken

Standardbild: Bild-Adresse des Standartbildes

Mouseoverbild: Adresse des Bilds des mouse over Bildes

 

 


Kommentar schreiben

Kommentare: 12
  • #1

    d-fix (Sonntag, 09 Oktober 2011 04:39)

    Good Code!
    Thanks!

  • #2

    elco (Sonntag, 09 Oktober 2011 04:41)

    It's for me.
    Regards,
    Vitek.

  • #3

    Pokeuser (Sonntag, 08 April 2012)

    Ja das ist leicht, was mich mehr interessieren würde (weil ich das selbst noch nicht kann ^^) ist, wie man die Bilder unten auf der Seite macht, die bei einem Mouseover runterscrollen ;)

    LG

  • #4

    madgolfteam (Montag, 10 Dezember 2012 16:13)

    Das ist ja simpel :-) supi, danke!

  • #5

    1376915748 (Dienstag, 03 September 2013 16:22)

    daaanke! Klasse beschrieben :)

  • #6

    altherrncouch (Donnerstag, 31 Oktober 2013)

    Funktioniert bei mir absolut nicht die Funktion schade drum =(

    Habe den Code selbst erstellt nach Vorgabe, aber das schien auch nicth zu klappen

  • #7

    Jörg Schade (Sonntag, 17 Mai 2015 17:11)

    Auf meiner Website http://www.radfahren-macht-spass.de/radtouren/ habe ich das alles genau so gemacht und es funktioniert wunderbar. Kann man die Bilder, die als Mouseover erscheinen, auch in den Vordergrund legen?
    Die Mouseover-Bilder sind bei mir größer als das Standardbild, das soll so sein, allerdings überdecken die Mouseover dann den Rest ein wenig.
    Vielen Dank für die Hilfe schon mal im voraus.

  • #8

    google (Mittwoch, 15 Juli 2015 11:27)

    Good

  • #9

    Sabine (Montag, 10 April 2017 09:45)

    Hallo, habe das gleiche Problem wie #7. Das Mouseover-Bild ist größer (Produktbild). Es liegt jedoch nicht über dem nebenstehenden Text. Wie bekomme ich das Bild in den Vordergrund ? Hilfe !

    VIELEN DANK.

  • #10

    Ronnie (Dienstag, 16 Mai 2017 10:48)

    Hi
    Vielen Dank für deine Anleitung. Hat alles super funktioniert.
    Wie kann ich nun dieses mouse over verlinken? Sinn wäre es ja dass ich darauf klicken kann und bei dementsprechenden Ort lande.
    Ich habe das Quellbild verlinkt, dies funktioniert leider nicht.
    Ich danke für eine Antwort.

    Beste Grüsse

  • #11

    Patrick Wö (Sonntag, 29 September 2019 18:22)

    Super

  • #12

    ulli (Dienstag, 12 November 2019 19:51)

    https://award.jimdo.com/tutorials/bildwechsel-mouse-over/

    ich wollteden generator auf obiger seite verwenden, aber es wird kein code generiert, was mach ich falsch ? LG Ulli