Ajouter l'attribut "rel" a un bouton de type "button"

[Pauloscorps]

Bonjour à tous,

Sur le site que je suis en train de développer, j'ai choisi de remplacer certain de mes liens par des <button type="button"> ou <button type="submit">.

Cependant, j'utilise le système de Facebox qui nécessite l'ajout d'un attribut "rel=facebox" sur les liens.

Or, cet attribut n'existe pas à ma connaissance sur la balise "button".

J'aimerais donc savoir s'il existait un moyen de "simuler" cet attribut sur un button grâce à Javascript. J'ai trouvé quelques résultats dans Google sur ce thème mais rien de vraiment concret.

Merci d'avance pour vos réponses,

Pauline.

EDIT : La bibliothèque jQuery est déjà installée sur mon site, pas de problèmes donc pour l'utiliser

[RomainVALERI]

Envoyé par Pauloscorps

Cependant, j'utilise le système de Facebox qui nécessite l'ajout d'un attribut "rel=facebox" sur les liens.

Or, cet attribut n'existe pas à ma connaissance sur la balise "button".

La balise <button> n'a effectivement pas d'attribut "rel".

Mais d'une certaine manière, si Facebox nécéssite un attribut rel="facebox" sur les liens : aucun problème, la balise <button> n'étant pas une balise <a>... ^^

Sinon, ça va partir sur un montage mystique avec un <a rel="facebox" href="blabla"> caché, que ton <button> va venir activer à la demande...

[Watilin]

Le plus propre ce serait de passer par l'attribut class. Mais pour ça il va falloir modifier la source de Facebox, ce qui n'est pas forcément prudent. Ça dépend si c'est bien fait : dans le meilleur des cas, deux lignes à rajouter dans la fonction de sélection ; dans le pire, des bouts de code à modifier un peu partout.

Sinon, en considérant qu'on est dans un contexte où la présence de JavaScript a été vérifiée, on peut se permettre de triturer le DOM, et rajouter dynamiquement de « faux » attributs rel sur les <input>. Comme si tu rajoutais une propriété quelconque (« blabla » ou « toto ») sauf que là elle s'appelle « rel ». Mais j'imagine que le but était justement de faire ça statiquement, donc je dis ça juste à titre d'information.

[Bovino]

Mouais... en même temps, vu que l'attribut rel est inutile en HTML, rien ne t'empêche de l'ajouter à ton bouton, mais ça risque bien entendu de ne pas fonctionner car il y a fort à parier que le script attend cet attribut uniquement sur des liens.

Ensuite, reste à se poser la bonne question : en quoi le choix d'un bouton est-il important ? Tu gagneras probablement à conserver des liens en les stylant grâce aux CSS, ce sera d'ailleurs certainement plus "design"

[Pauloscorps]

Bonjour à tous et merci de vos réponses (et désolé de ne répondre que si tardivement).

En effet Bovino, j'ai bel et bien essayé d'ajouter l'attribut "rel" à mes boutons, mais comme prévu cela ne fonctionnait pas. Au clic sur le bouton, le contenu de ma facebox ne s'ouvre pas dans la dite facebox mais dans un nouvel onglet.

Ensuite pour ce qui est de ton idée Watilin, je t'avouerais que là je suis dépassée, n'ayant une connaissance que très limitée de Javascript. Pourrais-tu m'orienter vers des explications voire au mieux un tutoriel permettant de réaliser ce dont tu m'a parlé ?

Autre problème, je ne suis pas le développeur de ce projet, seulement l'intégrateur, et n'ai donc pas la main mise sur tout les documents.

Étant donné qu'il s'agit d'un site web de société, je ne peux pas me permettre de modifier tout les <input type="button"> de mon site en <a> . Le choix a d'ailleurs été fait de limiter le nombre d'images sur le site, c'est pourquoi j'ai opté pour des boutons full CSS3 avec des tricks pour les arrondis sous IE . Même les dégradés sont en CSS.

Merci encore pour vos réponses et je l'espère, les prochaines.
Pauline.


Voici un aperçu des dits boutons :



Ils peuvent adopter plusieurs classes : petit, grand, et 6 autres classes de couleur de police.