Moinsen!
Zu aller Anfang: Es geht um meine Website www.konzertfotografie.hamburg.
Wenn man auf diese Seite geht und dann auf eines der Bilder auf der Startseite klickt, wird man zum entsprechenden Beitrag weitergeleitet.
Das erste, was man dort zu sehen bekommt, ist ein Foto, das den ganzen Bildschirm füllt. Allerdings sehe ich durch die Website-Anakyse, dass etwa die Hälfte der Besucher nur 10s auf meiner Seite bleibt. Als ich die Website einer Freundin zeigte und sie dann, nachdem sie auf den Beitrag umgeleitet wurde, wie blöde auf dem vollflächigen Bild weiterklickte und darauf wartete, dass etwas passiert, war die Ursache für die 10s-Besuche wohl eindeutig: Den Nutzern ist nicht klar, dass sie nur nach unten scrollen müssen, um den Beitrag zu sehen. Aus diesem Grund befindet sich nun auf der rechten Seite ein „Scroll Down“-Pfeil, den ich aber gerne etwas schöner umsetzen würde.
Woran ich also genau dachte:
- Wird man auf die Seite geleitet, soll das Beitragsbild weiter angezeigt werden.
- Klickt man nun auf den Bereich, in dem das Beitragsbild zu sehen ist, soll der Scroll-Down-Pfeil erscheinen.
- Sobald man dann runterscrollt, soll der Scroll-Down-Pfeil wieder verschwinden.
Zuerst dachte ich daran, es wie folgt umzusetzen:
Ich lege einen DIV-Container vollflächig über das Beitragsbild und setze ein transparentes Bild dort hinein. Bei onClick soll ein Bilderwechsel stattfinden und ein GIF angezeigt werden. Dieses GIF wäre dann eine einfache Animation mit fade-Effekt, Halbtransparenz und animiertem Pfeil. Sobald man nun runterscrollt, tritt der Fall OnMouseOut automatisch ein und das GIF soll wieder verschwinden.
Leider sind meine Fähigkeiten stark begrenzt, es wäre also nett, wenn mir jemand eine Komplettlösung vorschlagen kann. CSS, HTML und JAVA kann ich jedenfalls so weit lesen, dass ich verstehe, was passiert und wie ich es im Backend einbinden muss. Nur selber schreiben kann ich nicht. Meinen Versuch präsentiere ich dennoch einmal, funktioniert natürlich leider nicht:
<style type="text/css">
#bildwechsel a {
background-image: url(./scrolldownpfeil.gif);
background-repeat: no-repeat;
display: block;
width: 246px;
height: 70px;
}
#bildwechsel img {
display: block;
width: 246px;
height: 70px;
border: 0;
}
#bildwechsel a:active img {
visibility: hidden;
}
</style>
<div id="bildwechsel">
<a href="#"><img src="./transparent.png" /></a>
</div>
Der CSS-Teil wird später in eine gesonderte Datei ausgelagert, ist hier nur direkt implementiert, um eine schnelle Testdatei zu erstellen. Mit position wird der DIV-Container „bildwechsel“ dann letztendlich über das Beitragsbild gelegt.
Ach, übrigens: Ich muss hier mit transparenten Bildern arbeiten und kann nicht direkt das Beitragsbild nutzen. Das Beitragsbild wird durch Wordpress jedes mal selbst eingebunden und da dieser Effekt auf allen Beitragsseiten erscheinen soll, wäre es recht unpraktisch, das für jedes Beitragsbild neu zu machen.
Vielen Dank für Eure Hilfe!
Grüße
Jan