[Résolu] Quand un div doit cloner un lien

Bonjour
Voici le code simplifié lié à mon problème :

<div id="contenant">
Texte
<img src="lienversuneimage" />
<a id="lien" href="monlientyoutube" class="fancybox">ma vidéo</a>
</div>

Sachant que #contenant est un carré de 300px de côté, et que #lien se situe en plein milieu de #contenant, j'aimerais que lorsque je clic n'importe ou sur #contenant le comportement soit le même que si je cliquais sur #lien... avec le comportement .fancybox pour ouvrir ma vidéo youtube.

Un indice : je débute avec le JQuery, mais je commence à savoir le lire... lentement

En vous remerciant de votre temps.
Modifié par Gilforge (14 Mar 2013 - 15:07)

#contenant a{
	display:block;
}

ne suffirait-il pas ?

Merci de ton attention Manhattan

Ah oui mince, je n'ai pas pensé à indiquer dans mon exemple qu'au dessus du <a> j'ai des contenus.

J'ai aussi essayé diverses solutions dont celle que tu proposes :
- onclick sur le <div>, ça marche mais je suis obligé de dupliquer le lien (pas intéressant) et je n'ai pas la fancybox
- le <a> en display : block fait disparaître le reste de mon contenu

PS : je corrige mon exemple
Modifié par Gilforge (14 Mar 2013 - 15:46)

Bon je commence fort

Pour faire plus rapide, j'ai utilisé une solution sans JQuery pour boucler le problème sans me prendre la tête en mettant le <div> dans un <a> tel que :

<a style="position:absolute" href="monlientyoutube">
<div id="contenant">
Texte
<img src="lienversuneimage" />
<a id="lien" href="monlientyoutube" class="fancybox">ma vidéo</a>
</div>
</a>

Pour éviter que le contenu ne disparaisse, la position absolute sauve le coup.
J'ai 2x le même href, mais tant pis pour moi.

Si vous trouvez la solution en JQuery, je reste ouvert... évidemment parce que ça c'est HTML5 et IE, il aime pas ça

Merci de votre attention.
Modifié par Gilforge (14 Mar 2013 - 16:32)

Je ne sais pas vraiment si c'est que tu souhaite, mais avec jQuery tu peux avoir ceci :

http://jsfiddle.net/Super_baloo8/DUuMm/

$('#contenant').on('click', function () {
    //window.location.href = $(this).find('a').prop('href');
    // Ou
    window.open($(this).find('a').prop('href'));
});

Ou soit la méthode sans JavaScript :

http://jsfiddle.net/Super_baloo8/jYGCb/

<a id="contenant" href="http://youtube.com" class="fancybox">
Texte
    <img src="tonimage" />
ma vidéo
</a>

#contenant {
    width: 300px;
    height: 300px;
    display: block
}

P.S: "<a>" ne peut contenir que des élément "inline", donc exit les DIV =)
Modifié par Super_baloo8 (15 Mar 2013 - 00:17)

La technique JQuery m'a été bien utile.

Merci Super Baloo8