Rendre un background cliquable...

Résolu
Bonjour,

je ne trouve pas l'astuce pour rendre un background cliquable...
Pour exemple, je souhaiterais arriver à ça image des produits top a c h a c'est des images en background mais cliquable
PLSS HELP
Merci pour votre attention
__________________________________
<div 'style='text-align: left; height: 215px; background: url(images/imagespro/$image)

no-repeat scroll center top transparent; padding: 0px;'>

4 réponses

  1. Bonjour, tu peux mettre une img dans un lien:

    <a href="monlien"><img src="img1.jpg" width="500px" height="500px" /></a>

    ou sinon mettre un lien en display: block; et y mettre une image de fond je pense.

    #monlien {
    display: block;
    width: 500px;
    height: 500px;
    background: url('img1.jpg') no-repeat center ;
    }

    A confirmer

    +++ Spangenhelm +++
    1. Contributeur
      Hello,

      Tu peux aussi appliquer à la div concerné un background ET un évènement onclick :

      <div style="text-align: left; height: 215px; background: url(images/imagespro/$image) no-repeat scroll center top transparent; padding: 0px;" onclick="window.location('monurl');">  


      Tant qu'on ne fait pas, on ne sait pas.
      1. Un background sert uniquement à la décoration : c'est un non sens de le rendre cliquable, contraire à toute règle d'accessibilité.

        Tout élément cliquable doit être dans le code html (texte ou image dotée d'un alt pertinent), et non CSS.
        1. Contributeur
          Il n'a pas demandé l'accessibilité, il a demandé un background cliquable...
        2. Mouarf ! Ça c'est de la réponse !

          "ben quoi, il m'a demandé une corde pour se pendre, je lui ai donné puisqu'il me l'a demandé ! Où est le problème ?" :-D
        3. Contributeur
          Oups, je ne savais pas que coder salement était un crime, au temps pour moi.
      2. merci a vous tous mais jais trouver une solution a mon problem.

        ______________________________________________________

        css

        #zone1 { /* la zone de lien */
        float: left;
        width : 100%;
        height: 100%;
        margin-left: 0px;
        margin-top: 0px;
        }
        ___________________________________
        code de la page en php

        <div style='text-align: left; height: 215px; width:auto; background: url(images/imagespro/$image)

        no-repeat scroll center top transparent; padding: 0px;'><a id='zone1' href='index.php?pg=article&id_s_f=".$res['id_s_f']."&id=".$res['id']."' title='click'> <img src='promo/$promo'></div></a>