Rendre un background cliquable... [Résolu/Fermé]

Signaler
Messages postés
199
Date d'inscription
dimanche 9 novembre 2008
Statut
Membre
Dernière intervention
5 juin 2017
-
Mihawk
Messages postés
4455
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
-
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


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 +++
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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.
Mihawk
Messages postés
4455
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
720
Il n'a pas demandé l'accessibilité, il a demandé un background cliquable...
notobe
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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
Mihawk
Messages postés
4455
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
720
Oups, je ne savais pas que coder salement était un crime, au temps pour moi.
Messages postés
199
Date d'inscription
dimanche 9 novembre 2008
Statut
Membre
Dernière intervention
5 juin 2017
1
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>
Messages postés
4455
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
720
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.