maak.fischer

diplom medienberater

Zwei Bilder übereinander legen

„Da beisst dich doch der Zeisig“, wie der gute Fips Asmussen sagte. Da stand ich also vor dem Problem, ein Vorschaubild für ein Video auf eine Website zu bringen. Das allein stellte noch nicht das Problem dar. Vielmehr wollte ich über das Vorschaubild ein zweites legen, welches die Abspielmöglichkeit mit einem Play-Knopf anzeigt. Aber wie geht sowas?

Die übliche Methode besteht darin, via JavaScript das Bild auszutauschen. Da das Bild aber dynamisch von YouTube erzeugt wird, fällt diese Möglichkeit weg.

Vorschaubild von YouTube

Vorschaubild von YouTube

Allerdings ist die Größe dieser YouTube-Bilder stets die gleiche (120 auf 90 Pixel). Somit ging ich schonmal hin und gestaltete mir einen Play-Knopf in dieser Größe und mit transparentem Hintergrund, den ich über das Vorschaubild zu legen suchte.

Play-Knopf in Bildgröße

Play-Knopf in Bildgröße

Die Lösung besteht darin, das Bild selbst komplett transparent – quasi unsichtbar – anzulegen, und das Vorschaubild nur als CSS-Hintergrund auszugeben: background-image: url(…). Das optische Ergebnis ist das gleiche, nur das man jetzt die Möglichkeit hat, das eigentliche Bild beim Überfahren mit der Maus auszutauschen (src=“…“). Da dies den Hintergrund nicht berührt, ergibt sich das gewünschte Ergebnis.

HTML

<a href="http://www.youtube.com/watch?v=JpmECTcA6cg">
    <img id="ProviderVideo"
         style="width: 120px;
                height: 90px;
                background: url(http://i2.ytimg.com/vi/JpmECTcA6cg/default.jpg);"
         src="http://www.meinewebsite.de/blank.png"
         alt="" />
</a>

JQuery (JavaScript)

$(document).ready(function () {
    $("#ProviderVideo").hover(
        function () {
            $(this).attr('src','http://www.meinewebsite.de/play_video.png');
        },
        function () {
            $(this).attr('src','http://www.meinewebsite.de/blank.png');
        }
    );
});

Ihr Kommentar

© 2009 maakfischer

alle rechte vorbehalten • kontaktimpressumseitenanfang ↑