html code ins Bild einfügen

Hallo,

ich möchte ein html code (Countdown) in ein Bild einfügen.

Dieser Countdown soll aber weiterlaufen, kann man sowas realisieren falls ja wie ??

Ungefähres aussehen siehe Anhang

 

Einen Countdown kann man in Javascript umsetzen. Dazu gibt es reichlich Vorlagen im Netz. Die Ausgabe des Counters kapselst du dann in einen div-Container und positionierst ihn "absolut" über dem Bild...

Code:

<img src="bild.jpg" />
<div style="position:absolute; left: ***px; top: ***px;">Code vom Counter</div>

Die Position kann man alternativ per "margin-top" usw. ggf. auch mit negativen Werten angeben. Kommt ganz auf die restliche Seite an.

 

@kalweit:
Die absolute Positionierung ist, denke ich, in diesem Fall nicht allzu sinnvoll. Man denke nur an relative Schriftgrößen, Verschiebungen in einzelnen Browsern oder Änderungen an dem Inhalt darüber.

Besser:
Du legst einen DIV an, der das Bild als Hintergrund verwendet. Innerhalb dieses DIVs wird dann ein JavaScript Countdown positioniert (Vorgehen habe ich hier mal beschrieben). Das könnte dann etwa so aussehen:

HTML:

<div style="background:url(pfad/zur/grafik.png);width:100px;height:200px;" id="countdown"></div>

Größenangaben entsprechend anpassen und mit padding kann dann der Inhalt des DIVs innerhalb des Bildes verschoben werden. countdown ist dann ID in die das JavaScript den Countdown schreiben soll.

 

Wenn man per "margin" positioniert ist es relativ egal, da sich die Position dann auf das vorherige Element (das Bild, welches ja eine feste Größe hat) und nicht auf die Seite bezieht.

 

Mit einem negativen Margin-Wert zu hantieren halte ich trotzdem für ziemlich unelegant, sorry. Wofür gibt es DIVs und Hintergrundbilder, mit denen das deutlich besser und zuverlässiger realisiert werden kann?

 

Das geht auch mit positiven Werten, man muss nur die Reihenfolge ändern. Der TO hat zwei Varianten und wird sich was aussuchen.

Mag sein. So lange es in 95% der Browser funktioniert, ist es mir trotzdem Wurscht. Laut Spezifikation sind negative Werte auch erlaubt: http://www.w3.org/TR/CSS21/box.html#margin-properties

 

Ja, das sind sie. Es kann auch durchaus mal sinnvoll sein, um über die Elemente darunter Abstand zum oberen Element abzubauen. Aber, um es darauf zu positionieren, gibt es background und DIVs.

Darauf können wir uns einigen.