Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

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

Pagina: 1
Acties:

  • SomerenV
  • Registratie: November 2010
  • Laatst online: 16:32

SomerenV

It's something!

Topicstarter
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?

Ik Schiet Film | Website | Instagram


  • SuperSpoof
  • Registratie: Mei 2009
  • Laatst online: 22-11 10:47
Zoiets?:

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

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

FNAC 16 GB status overzicht: www.outfitted.nl , stuur me een DM met jou status om het nog completer te maken!


  • SomerenV
  • Registratie: November 2010
  • Laatst online: 16:32

SomerenV

It's something!

Topicstarter
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 ]

Ik Schiet Film | Website | Instagram


  • SuperSpoof
  • Registratie: Mei 2009
  • Laatst online: 22-11 10:47
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>

FNAC 16 GB status overzicht: www.outfitted.nl , stuur me een DM met jou status om het nog completer te maken!


  • L01
  • Registratie: December 2003
  • Laatst online: 17-11 21:53

L01

Zoiets als dit:

http://jsfiddle.net/WYNnb/

Op de chick klikken zorgt ervoor dat deze verdwijnt.

Hi, I'm a signature virus. Put me in your signature to help me spread.


  • NMe
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

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.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1