Mit CSS wird dem Webdesigner eine große Bibliothek an nutzbaren Eigenschaften gegeben. Das ganze ist so komplex, dass viele Ziele auf mehrere Arten erreicht und absolviert werden können. Der Bildwechsel per Hover ist eines davon. Ich zeige 3 verschiedene Möglichkeiten, Bilder beim überfahren mit der Maus auszutauschen. Inhaltsverzeichnis Zwei Bilder miteinander tauschen Ein doppeltes Bild - Bildausschnitt verschieben Zwei Bilder, per Hover das darüberliegende ausblenden Für dieses Tutorial nutze ich 3 verschiedene Bilder. Bildwechsel bei MouseOver mit Contao möglich?. Diese kannst du downloaden und dann selbst designen. CSS Tutorial: Bild 1 CSS Tutorial: Bild 2 CSS Tutorial: Bild 3 Klicke die Bild-Links mit "Rechtsklick" an und wähle "Grafik speichern unter.. ". Kopiere dir die Bilder in den Ordner, wo auch deine html-Datei zum programmieren/designen liegt, sonst wird dir beim nachprogrammieren kein Bild angezeigt. Gut, fangen wir an! 1. Zwei Bilder miteinander tauschen Bei der ersten Möglichkeit benötigen wir Bild 1 und Bild 2. Diese werden per Maus-Hover miteinander ausgetauscht.
Dann kopiert Ihr die Links bzw. die URL der beiden Bilder, die Ihr gerade hochgeladen habt und speichert Sie z. 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.
Link: Hier kannst du die Bilder bzw. Bildwechsel bei onmouseover - mediengestalter.info. das Modul verlinken
Standardbild: Bild-Adresse des Standartbildes
Mouseoverbild: Adresse des Bilds des mouse over Bildes
Sollte CSS nicht funktionieren, wird der Text innerhalb der Span-Tags angezeigt. Der Link als solches wird immer funktionieren.