Wie würdet Ihr das realisieren?

TomTom

Hallo an alle, ich zermartere mir den Kopf, wie ich das hin bekomme....

Ich muss eine Bilddaten (png) auf einer Seite zeigen.

Beim Mouseover soll sich die Bilddatei durch eine genau so große, jedoch inhaltlich andere Bilddatei automatisch austauschen. Also ähnlich einem Button.

Zusätzlich soll die zweite Bilddatei dann auch noch ein klickbarer Link sein.

Also man könnte sagen ein Button, dem ich zwei Bilddateien zuweisen kann.

Mit den Zeta Standard Widgets gelingt es mir nicht und auf der Seite von Mario finde ich auch nicht wirklich so ein Widget.

Hat jemand eine Idee?

Bitte bedenkt das ich kein HTML-Programmierer bin .

VG Thomas

Hanabi

Hallo Thomas,

um HTML oder CSS wirst Du aber nicht ganz herumkommen . Eine Grundlage könnte https://ppfeufer.de/css-bildwechsel-bei-mouseover/ liefern.

Mario

Oh, so wurden früher ganze Menüs mit Grafiken erstellt.

Ich habe mal den Code vom Thomas übernommen und ein paar nützliche Optionen hinzu gefügt.

CSS

<style>
.bildwechsel {
background:url("https://www.zella.de/media/images/thumbnails/safarizelt-5-940567be26fe4d9b860749b2b0a6d819-500x300.jpg");
width:500px;
height:300px;
background-size: cover;
transition: all 0.8s;
}
.bildwechsel:hover {
background:url("https://www.zella.de/media/images/thumbnails/safarizelt-19-a4729ee97f994c80a3b4696093541aae-01-500x300.jpg");
background-size: cover;
}
.bildwechsel a {
width:100%;
height:100%;
display:block;
text-decoration:none;
border-bottom:none;    /* Option fuer Flat Responsive  */
}
.bildwechsel a span {
display:block;
width:100%
}


@media (max-width: 800px) {
.bildwechsel {
width:250px;
height:150px;
}}
</style>

Alles anzeigen

HTML

<div class="bildwechsel">
<a href="https://www.zella.de/safarizelte.html">
<span></span>
</a>
</div>

Einfach mal den Code einfügen und schauen ob es passt.
Die Bilder der Bildverwaltung hinzufügen und die Objekt-ID der Bilder kopieren Zahnrad > Mehr > Objekt-ID kopieren.
Die URLs der Bilder mit der Objekt-ID ersetzen.
Die Größe der Bilder und ggfs. den Breakpoint anpassen.
Und natürlich den Link anpassen.

TomTom

Wow!

Vielen Dank euch Beiden.

Das ist mal wieder "super geil" hier. was anderes fällt mir zu der tollen Hilfestellung wirklich nicht ein.

DANKE. Ich probiere das gleich mal...

Liebe Grüße und bleibt gesund, Thomas

P.S. Das wär doch mal eine Idee für ein neues Widget von Mario... hahahaha

Wie würdet Ihr das realisieren?

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?