Simple Mousehover auf eine Image

Fix&Foxi

Hallo,

ich weiß nicht so recht wie ich die Sache angehen soll.

Im Forum bei der suche auch nix gefunden, evtl. ist die Lösung zu simple und ich bin zu bl...

Ich möchte einen simplen Mousehover auf ein image einbauen, ohne Bildergalerie.

Also: das wenn ich mit der mouse über das jpg fahre ein anderes angezeigt bekomme, größe soll nicht verändert werden, hoher jpg hat auch die gleiche große.

habe noch html Codes gesucht und nix gefunden, also geht das nicht, oder ?

Also nur in css, da gibt es ja in der "erweiterten Bild Bearbeitung Einstellung" die "CSS Klasse oder Stylesheets" ich habe da mal probiert

hier der code denn wp schreibt, wo ist der Fehler?

....aber es kappt nicht

hoffe ihr könnt mir eine simple Lösung geben.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

teste mal dies

Code

<a href="http://...../test/portfolio-beispiel-zusammenfuegen"><img src="http://....../wp-content/uploads/Portfolio.Beispiel.zusammenfuegen.jpg" class="alignnone size-full wp-image-282"  title="Portfolio.Beispiel.zusammenfuegen" alt="Portfolio.Beispiel.zusammenfuegen.Virtuelle.Rundgaenge" rel="attachment wp-att-282" width="340" height="100" onmouseover="this.src='http://...../wp-content/uploads/Portfolio.Beispiel.zusammenfuegen.Hover_.jpg);'"
onmouseout="this.src='http://....../wp-content/uploads/Portfolio.Beispiel.zusammenfuegen.jpg'"></a>

deine streng geheimen Links musst natürlich anpassen

Fix&Foxi

hallo art of pic ,

fast richtig .... dank dir in jeden fall für denn Ansatz

hier der saubere code, wenn jemand so etwas machen möchte

HTML

<a href="http://#" target="_blank"><img class="aligncenter" style="border-style: initial; border-color: initial; border-width: 0px;" title="" onmouseover="this.src='http://.../wp-content/uploads/portfolio-beispiel-zusammenfuegen-hover.jpg';" onmouseout="this.src='http://..../wp-content/uploads/portfolio-beispiel-zusammenfuegen.jpg';" src="http://3d-virtualtour.eu/wp-content/uploads/portfolio-beispiel-zusammenfuegen.jpg" alt="" width="340" height="100" /></a>

Tutrix

Zitat von Fix&Foxi

hallo art of pic ,
fast richtig ....

nun der Code oben stimmt schon
ist natürlich aus deinem Code-Wirwar zusammen gestellt
das du nun was anderes verwendest war daraus ja nicht zu ersehen

der einfache mouseover Code sieht so aus

Code

<img src="Standardbild" 
onmouseover="this.src='Mouseoverbild'" 
onmouseout="this.src='Standardbild'">

das ganze in einen Link gesetzt

Code

<a href="dein Link"><img src="Standardbild" 
 onmouseover="this.src='Mouseoverbild'" 
 onmouseout="this.src='Standardbild'"></a>

natürlich kann man das dann noch beliebig erweitern, mit target="_blank" border und allen möglichen schnikschnak

Fix&Foxi

claro ..... auf dem Punkt gebracht :rolleyes:

wo bei, was ich jetzt sehe das der mouseover etwas verzögert einsetzt, weiss nicht ob man das noch optimieren kann ?

Tutrix

Zitat von Fix&Foxi

wo bei, was ich jetzt sehe das der mouseover etwas verzögert einsetzt

das liegt daran, das das Bild ja erst geladen werden muss

wenn das nicht geschehen soll, musst du mit einem preload Skript arbeiten

z.B. http://www.webdesign-today.de/webdesign/preloading.html

ob sich das lohnt, hängt von der Anwendung ab

Fix&Foxi

hab ich mir schon gedacht .... ist aber nur 1 sec.

wie du schon sagt, dass lohnt sich wohl nur für grosse Sachen

... bis dahin & dank noch mal

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Simple Mousehover auf eine Image

Jetzt mitmachen!