Mouseover Bild mit Link

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

sweetcatherine

Neues Mitglied
3 Oktober 2020
9
0
1
30
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
 

basti1012

Senior HTML'ler
26 November 2017
1.463
156
63
39
Minden
sebastian1012.bplaced.net
Das ist eigentlich ein Thema, was mit Google lösen kann.
Zb hier,

Auch hier im Forum gab es schon solche Themen
 

sweetcatherine

Neues Mitglied
3 Oktober 2020
9
0
1
30
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
Mein Editor hat es mir verraten: Du musst die URLs der Bilder in Hochkommas setzen, dann funktioniert es:
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'">
    </a>
An der Größe des Hoverbildes musst Du noch arbeiten, denn es ist riesengroß!
 

sweetcatherine

Neues Mitglied
3 Oktober 2020
9
0
1
30
1000Dank...!
irgendwie zeigt es mir immernoch nur das erste bild an... oder seht ihr es richtig?

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
Nein, bei mir das selbe. Bei dem Bild kann ich weder das inline-Javascript (onmouseover, onmouseout) noch ein CSS-Hover finden.
 

m.scatello

Senior HTML'ler
15 Februar 2017
1.353
163
63
Du hast auch nur ein Bild im Quellcode und die <br> im a-Tag gehören da auch nicht hin
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
Dann ist möglicher Weise beim Kopieren etwas nicht richtig gelaufen oder Du hast die Änderung noch nicht hoch geladen. Sieh es dir selbst an: Rechtsklick- "Seitenquelltext anzeigen".
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
Wahrscheinlich ist dies die Erklärung:
wordpress-support schrieb:
WP strips out unrecognized attributes in post content. You could use the “wp_kses_allowed_html” filter to add onclick as an allowed attribute for anchor tags.
 

sweetcatherine

Neues Mitglied
3 Oktober 2020
9
0
1
30
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?
 

sweetcatherine

Neues Mitglied
3 Oktober 2020
9
0
1
30
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...

 

basti1012

Senior HTML'ler
26 November 2017
1.463
156
63
39
Minden
sebastian1012.bplaced.net
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:

Neueste Beiträge