Discussion :

[Claude B]

Bonjour,

J'ai créé une image sprites avec sept icônes de réseaux sociaux. J'utilise sur mon site WordPress l'extension Simple Share Buttons Adder (SSBA) et le code Custom de ce même plugin. Dans cette extension, le custom CSS est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.sprite {display: inline-block; vertical-align: middle;}
.sprite {background-image: url(https://www.monsiteweb.fr/wp-content/uploads/2017/06/e21637b0affebd3ac0c5e47143e61cc3.png); background-position: left center; background-repeat: no-repeat;}
.sprite.email_png {background-position: 0 0; width: 32px; height: 32px;}
.sprite.facebook_png {background-position: -37px 0; width: 32px; height: 32px;}
.sprite.google_png {background-position: -74px 0; width: 32px; height: 32px;}
.sprite.linkedin_png {background-position: -111px 0; width: 32px; height: 32px;}
.sprite.pinterest_png {background-position: -148px 0; width: 32px; height: 32px;}
.sprite.print_png {background-position: -185px 0; width: 32px; height: 32px;}
.sprite.twitter_png {background-position: -222px 0; width: 32px; height: 32px;}

Et dans une page PHP, le code suivant (single.php) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<span class="sprite email_png"></span>
<span class="sprite facebook_png"></span>
<span class="sprite google_png"></span>
<span class="sprite linkedin_png"></span>
<span class="sprite pinterest_png"></span>
<span class="sprite print_png"></span>
<span class="sprite twitter_png"></span>

Plusieurs problèmes rencontrés : je n'ai aucun lien sur les éléments des sept images constituantes du sprite. Par exemple, le passage de la souris sur l'une des sept icônes ne donne rien, pas de lien, pas de forme manuelle. Cela me paraît normal puisqu'il n'y a aucun a href de défini dans le code HTML.
Mais je ne sais pas faire, je tourne en rond depuis hier.

Merci d'avance pour votre aide,

Cordialement,

Claude

[paoli121]

Tu peux expliquer de façon plus simple?



FIN EXECUTE VOIR

[Claude B]

Oui en effet ! Sur ma page où apparaît le sprite image composé de sept images de réseaux sociaux, je n'ai pas de lien de ces images vers facebook par exemple ou vers email.

Merci d'avance,

Claude

[paoli121]

Tu veux que lorsqu'on click sur l'un de tes icones par exemple facebook ça redirige vers facebook?? c'est ça?? ou bien c'est les icones de ces reseaux tu cherche?


FIN EXECUTE VOIR

[Claude B]

En effet, il 's'agit du clic sur l'une de ces icônes (Email, Facebook, Google +, LinkedIn, Pinterest, Print et Twitter)

Merci,

Claude

[paoli121]

ok utilise alors la balise <a href="le_lien_du_reseau" target="_blank" class="..."> a la place de <span class="...">.
Par exemple pour facebook :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="www.facebook.com" target="_blank" class="sprite facebook_png"></a>

FIN EXECUTE VOIR