Mouseover im Blog

[Sasha4Jake]

Hallo.

Ich bin ein ziemlicher Neuling was HTML angeht, meine Kenntnisse beschränken sich auf das, was ich mir für das Abändern meines Blogs zusammen gegoogelt habe.

Ich möchte im Dezember so eine Art Adventskalender machen.
Dafür werde ich jeden Tag einen neuen Post online stellen, in dem das "Türchen" des Kalenders zu sehen ist.

Ich möchte gerne, dass zuerst nur ein Bild von einer Tür zu sehen ist, wenn man drauf klickt, soll dann das tatsächliche Bild zu sehen sein.

Wenn ich ein Bild im Blog einbinde sieht das so aus:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-y9feFYHEMHc/T_IGyvoyrgI/AAAAAAAAAOs/CYKhwi2oYGU/s1600/WonderCon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://3.bp.blogspot.com/-y9feFYHEMHc/T_IGyvoyrgI/AAAAAAAAAOs/CYKhwi2oYGU/s320/WonderCon.jpg" width="320" /></a></div>
<br />

Dabei lade ich das Bild von meinem Rechner auf den Server von Blogspot hoch.

Wie und wo müsste ich nun die onclick Funktion dazuschreiben?
Ich könnte die Bilder über einen Bilder-Hosting-Service hochladen, damit ich eine Quelle bekomme.

Ginge es theoretisch auch, dass von dem Bild auf ein eingebettetes YouTube Video oder ein Flash Element (HTML Code dafür habe ich) "umgeleitet" wird?

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt.

Danke schon mal für Eure Hilfe.

 

[threadi]

Ich bin irritiert. Du schreibst im Titel von Mouseover, aber im Text von Klicken? Ich vermute Du meinst klicken, denn Mouseover macht in dem Zusammenhang (Adentskalender) nicht viel Sinn ;)

Du brauchst dafür JavaScript. Daher habe ich auch dein Topic in den richtigen Bereich geschoben.

Wenn ich das richtig sehe, schreibst Du im href-Attribut des Links bereits das neue Bild rein? Und das soll nun anstelle des im img-Element eingetragenen Bildes angezeigt werden? Mit JavaScript ginge das wie gesagt. Beispiel:

<a href="neuesbild.jpg" onclick="this.childNodes[0].src=this.href;return false;"><img src="altesbild.jpg" alt=""></a>

Ungetestet.

 

[Sasha4Jake]

Erst mal Danke für die Antwort. Ja, ich meinte eigentlich "On Click", nicht "mouse over".

Das mit dem Bild habe ich jetzt auch hinbekommen.
Geht das auch mit einem YouTube Video.

Also dass man ein Bild sieht und wenn man draufklickt, beginnt das Video zu spielen.
Das Bild hat ja in einem Adventskalender nichts mit dem Video zu tun, ich kann also nicht einfach das Vorschaubild anzeigen lassen.

Danke noch mal.

 

[threadi]

Das geht durchaus auch, nur wäre der JavaScript-Code dafür ein deutlich anderer. Im einfachsten Fall legst Du das Video als ausgeblendetes Element (display auf none setzen) in deinem HTML-Code ab. Per Klick auf den Link wird es dann einfach eingeblendet (display per JavaScript auf block setzen).

Daneben gibt es auch noch komplexere JavaScript wo Du per JavaScript erst das Video in den DOM des HTML-Dokuments einbettest. Das wäre, je nach Aufbau deines HTML-Codes vielleicht auch der bessere Weg. In deiner ersten Frage beziehst Du dich ja auf ein Bild - das kann man nicht einfach so durch ein Video ersetzen, da der HTML-Code für ein Video sich ja deutlich von einem Bild unterscheidet. Daher musst Du vermutlich (!) deinen HTML-Code dafür anpassen.