[HTML][CSS] Verberg plaatje als er geklikt wordt

[SomerenV]

Ik heb een container met daarin twee dingen:
- een Vimeo-embed (iFrame)
- een overlay-plaatje bovenin de container

Ik wil, wanneer ik op de embed klik het overlay-plaatje verbergen. Op Google heb ik al lopen zoeken maar daar word ik niet veel wijzer van. Veel verder dan dat het iets met onClick te maken heeft ben ik niet echt gekomen. Vaak wordt er ook verwezen naar jquery, maar geen idee hoe ik dat doe. Het liefste doe ik het gewoon met html en css als dat mogelijk is.

Iemand enige idee hoe ik het voor elkaar krijg?

[SuperSpoof]

Zoiets?:

<img src="bla.jpg" id="cover">

<embed onclick="document.getElementById('cover').style.display='none';return false;">

[SomerenV]

SuperSpoof schreef op vrijdag 04 oktober 2013 @ 23:06:
Zoiets?:

<img src="bla.jpg" id="cover">

<embed onclick="document.getElementById('cover').style.display='none';return false;">

Geprobeerd maar ik krijg het niet voor elkaar.

<div class="showreel_container">
<div class="showreel_overlay">
<img src="images/showreel_overlay.png" id="cover"/>
<embed onclick="document.getElementById('cover').style.display='none';return false;">
</div>
<iframe src="http://player.vimeo.com/video/57225746?title=0&byline=0&portrait=0&color=ffffff" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Zo heb ik het nu. Showreel_overlay.png moet verborgen worden als er in showreel_container geklikt wordt. Of gaat dat niet omdat er een Vimeo-embed bovenop zit?

Edit: hier het betreffende gedeelte uit de CSS, mocht dat handig zijn om te hebben:

div.showreel_container
{
clear: both;
float: left;
width: 100%;
height: 577px;
position: relative;
}

div.showreel_overlay
{
clear:both;
position: absolute;
top: 0;
}

[ Voor 13% gewijzigd door SomerenV op 04-10-2013 23:21 ]

[SuperSpoof]

Probeer dit eens:

<div class="showreel_container">
<div class="showreel_overlay" id="cover" onclick="document.getElementById('cover').style.display='none';">
<img src="images/showreel_overlay.png">
</div>
<iframe src="http://player.vimeo.com/video/57225746?title=0&byline=0&portrait=0&color=ffffff" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

[L01]

Zoiets als dit:

http://jsfiddle.net/WYNnb/

Op de chick klikken zorgt ervoor dat deze verdwijnt.

[NMe]

Natuurlijk kun je vanuit de parent geen click afhandelen in je iframe, dat is een totaal andere scope. Je kan in je iframe de click afhandelen en dan met window.parent.document.getElementById('idvanjeimage').style.display = 'none'; werken maar als je die iframe alleen gebruikt voor een video en verder niks heb ik geen idee of je dat gaat lukken. Dan kun je beter een 100% transparante div of desnoods image over je iframe heen positioneren in je hoofdpagina en dáár de click op doen, maar dat betekent wel dat je iframe niet direct te bedienen is.