• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover Bild mit Link

sweetcatherine

Neues Mitglied
Hallo Zusammen,

ich bin absoluter HTM Neuling und will für meinen Backblog - Adventskalender Mouseovergrafiken erstellen. Irgendwie mache ich aber etwas falsch. Ich hoffe hier kann mir jemand helfen.

Ich möchte ein Bild einer Adventskalendernummer standardmäßig angezeigt haben, wenn man mit der Maus über das Bild fährt, soll ein anderes Bild (Vorschaubild auf das Rezept-also z.B. Bild meiner Schokomakronen) zu sehen sein. Wenn man das Bild mit der Maus wieder verlässt, soll es wieder das Ursprungsbild anzeigen. Wenn man darauf klickt soll sich die Rezeptseite öffnen.

Bisher habe ich diesen Code:

<a href="Link"><img src="https://sweetcatherinecom.files.wordpress.com/2020/09/01.jpg" alt="" onmouseover="this.src = https://sweetcatherinecom.files.wordpress.com/2020/08/img_3442.jpg" onmouseout="this.src = https://sweetcatherinecom.files.wordpress.com/2020/09/01.jpg" &gt;="">
</a>


der Link ist noch nicht erstellt, daher noch nicht drin, aber das ist nicht das Problem. Bisher wird nur das Ursprungsbild angezeigt. Außerdem soll das Mouseoverbild genau die gleiche Größe haben...

Wer kann mir helfen? Bin ganz verzweifelt.

Liebe Grüße
 
Werbung:
Das ist eigentlich ein Thema, was mit Google lösen kann.
Zb hier,

Auch hier im Forum gab es schon solche Themen
 
Hey, danke für die antwort! Ich habe jetzt auch einen neuen Code von der Werner Zenk seite ausprobiert. aber es funktioniert einfach nicht... kann mir nicht jemand sagen, was an meinem code falsch ist?lg
 
Werbung:
Du hast auch nur ein Bild im Quellcode und die <br> im a-Tag gehören da auch nicht hin
 
Werbung:
Nicht auf den Server kopiert? Fakt ist, es ist nicht der richtige HTML-Code.
 
Warum nicht ohne JS?
*** Link entfernt weil Seite nicht mehr erreichbar ***
Bildgrößen und Co sollten aber noch geändert werden.
Ggf. könnte man das auch als Background-image einbinden.
 
Zuletzt bearbeitet:
Werbung:
OH MEIN GOTT... da funktioniert es ja...jetzt probiere ich genau den Link bei mir... vielen Dank....!
ich hoffe nur dass es nicht a wordpress liegt... ich kann leider keine plugins benutzen...
kann ich die bildgrößen auch in dem link ändern oder besser anders hochladen?
 
ich habe jetzt genau den html code von der seite oben kopiert und eingefügt. jetzt erscheinen beide bilder untereinander... es ist zum verrückt werden...

 
Werbung:
Ich habe jetzt genau den HTML code von der Seite oben kopiert und eingefügt. Jetzt erscheinen beide Bilder untereinander... es ist zum verrückt werden...

Du musst die Css auch benutzen , die fehlt bei dir.
Code:
.hover_container{
  height:300px;
  width:300px;
  margin:0 auto;
  display:block;
  overflow:hidden;
}
.hover_container img{
  margin:0 auto;
  height:100%;
}
.hover_container .bild_hover{
  display:none;
}
.hover_container:hover  .bild_not_hover{
  display:none;
}
.hover_container:hover .bild_hover{
  display:block;
}
 
Werbung:
Von WP habe ich kein Plan.
Dann schreibe doch auch nichts zu dem Thema. Unter WordPress gibt es im Bereich Design/Customizer den Menüeintrag "Customer CSS" bzw. "Zusätzliches CSS". Dort kann man seine eigenen CSS-Regeln eintragen, wenn man kein Child-Theme benutzt. Das ist also keine Datei, wo man was am Ende einträgt.
 
Werbung:
Zurück
Oben