comment un rendre un élément HTML (DIV) cliquable
Un élément de type texte ne peut pas contenir un type block. Si l'on veut respecter les standards (W3C), on ne peut donc pas mettre un tag DIV dans un tag A pour transformer celui-ci en un lien. le code suivant permet de transformer un div grace au lien qu'il contient sans enfreindre la norme.
//un peu de jquery
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
//et hop !
<script type="text/javascript" >
$(function() {
$('div.go').each(function() {
var link = $(this).find('[href]').first().attr('href');
if ( link ) {
$(this).click(function () {
window.location = link;
});
}
});
});
</script>
Le code html du DIV cliquable, il doit avoir une class "go" et un lien l'interieur:
<div style="border: 1px #ccc solid; padding: 20px;">
<div class="go" style="border: 4px #000 solid; padding: 20px; margin: 10px;">
cliquez sur le div ! <a href="http://proot.fr/">ou le lien</a>
</div>
<div class="go" style="border: 4px #000 solid; padding: 20px; margin: 10px;">
cliquez sur le div ! <a href="http://proot.fr/">ou le lien</a>
</div>
</div>
Par exemple, on peut aussi choisir de ne pas avoir de liens et inventer une propriété data-url. Le HTML5 nous y autorise mais cette méthode empechera l'accès au liens si javascript est désactivé.
//un peu de jquery
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('[data-url]').each(function() {
var url = $(this).val();
$(this).click(function () {
window.location = url;
});
});
});
</script>
Voila ! il suffit maintenant de mettre une propriété data-url dans notre div pour le rendre cliquable:
<div data-url="http://proot.fr">
cliquez
<div> moi !</div>
</div>