[CSS/JS] Evenements sur un style css

Evenements sur un style css [CSS/JS] - HTML/CSS - Programmation

Marsh Posté le 01-07-2005 à 09:36:41    

Bonjour,
 
Est-il possible d'affecter à un style css, défini dans un fichier css, des événements tels onMouseOver, onMouseClick, onMouseOut qui appellent des fonctions Javascripts?

Reply

Marsh Posté le 01-07-2005 à 09:36:41   

Reply

Marsh Posté le 01-07-2005 à 09:39:19    

loooooooool
 
Appeler du javascript dans le css, si c'est possible, c'est pas bien.
 
Et pour faire ce que tu cites, y a :hover :active etc ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-07-2005 à 11:08:41    

avec hover tu peux appeler des fonctions javascript?
 
Pourquoi ce serait pas bien?  
Ce serait super puissant au contraire.

Reply

Marsh Posté le 01-07-2005 à 11:09:53    

nan les CSS c'est pour la mise en form stou

Reply

Marsh Posté le 01-07-2005 à 11:10:40    

tu veux faire quoi avec ton rollover ?


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-07-2005 à 11:12:23    

aminebousta a écrit :

Est-il possible d'affecter à un style css, défini dans un fichier css, des événements tels onMouseOver, onMouseClick, onMouseOut qui appellent des fonctions Javascripts?


 :sweat:
 
Un style CSS c'est un style CSS, rien d'autre, ça n'est pas un élément qui s'affiche c'est une directive d'affichage pour certains éléments de la page, comment pourrais-tu y associer des évènements JS [:mlc]  
 
C'est comme si tu demandais si on peut associer un évènement à la couleur bleue [:mlc] (pas au fait que quelque chose soit bleu, juste à la couleur bleue. Ca veut dire quelque chose pour toi? parce que pour moi ça n'a aucun sens, et ta question est du même niveau)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 11:18:54    

Tain les gars, vous êtes lourds à répondre toujours à coté de la question.
 
Alors pour répondre :
 
1 - Oui c'est possible.
2 - Dans la grande majorité des cas, c'est inutile, les CSS gérant elles mêmes leur roll over.
3 - Ca peut-être nécessaire dans le cas où la CSS en question ne serait pas un lien et qu'on désirerait que le rollover fonctionne sous IE qui refuse les :hover sur autre chose que les liens.
4 - Si tu veux un exemple, regarde la source du forum HFR.
 

Reply

Marsh Posté le 01-07-2005 à 11:21:44    

The-Shadow a écrit :

Tain les gars, vous êtes lourds à répondre toujours à coté de la question.
 
Alors pour répondre :
 
1 - Oui c'est possible.
2 - Dans la grande majorité des cas, c'est inutile, les CSS gérant elles mêmes leur roll over.
3 - Ca peut-être nécessaire dans le cas où la CSS en question ne serait pas un lien et qu'on désirerait que le rollover fonctionne sous IE qui refuse les :hover sur autre chose que les liens.
4 - Si tu veux un exemple, regarde la source du forum HFR.


 :non:  
C'était pas ça sa question, il demande si on peut associer un évènement Javascript à du CSS, donc que l'activation d'un style précis déclenche une action JS, pas aux éléments HTML [:aloy]  
 
Toi ce dont tu parles c'est associer les évènements au HTML et utiliser les CSS pour en styler la sortie [:aloy]


Message édité par masklinn le 01-07-2005 à 11:22:18

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 11:23:13    

Alors là, méa culpa.

Reply

Marsh Posté le 01-07-2005 à 11:24:24    

The-Shadow a écrit :

Tain les gars, vous êtes lourds à répondre toujours à coté de la question.
 
Alors pour répondre :
 
1 - Oui c'est possible.


Non ce n'est pas possible :o

Reply

Marsh Posté le 01-07-2005 à 11:24:24   

Reply

Marsh Posté le 01-07-2005 à 11:24:49    

Oui je suis grillé :o

Reply

Marsh Posté le 01-07-2005 à 11:34:33    

Je comprends tout à fait votre point de vue.
 
Le CSS c'est prévu au départ pour la mise en forme des éléments de la page html et rien d'autre.
 
Je ne veux rien faire de précis avec ce roll over, je me posais une question générale.
 
Le mécanisme du fichier css externe ou de la balise style consiste à attribuer des propriétés à des tags de la page sans avoir à les écrire au sein même des tags.
 
Donc si on définit une hauteur dans un style css et que le navigateur pendant la conversion du code html en affichage réel à l'écran, rencontre une balise qui fait référence à ce style grâce à la propriété class, il va faire la liaison et va se comporter exactement comme si on lui avait précisé height=... dans la balise.
 
Puisque ce mécanisme de liaison entre l'affichage des tags et la définition d'un style existe et fonctionne sur tous les navigateurs, je trouve ça dommage que ça ne concerne que les attributs d'affichage de ces tags comme width, height, etc...
Et je me demandais s'il était possible de faire la même chose avec d'autres propriétés de tags classiques tels "onClick" ou "href" ou "name", etc... C'est-à-dire des propriétés qui ne sont pas des propriétés d'affichage.
 
Si c'est impossible car CSS ne s'occupe que des propriétés d'affichage et ne sort pas de ce domaine je comprends tout à fait.
 
Mais que cette fonctionnalité ne soit pas bien c'est ça que je ne comprends pas.  
Tout ce qui peut permettre de centraliser et d'externaliser les propriétés des tags peut être vraiment utile pour la rapidité des modifications et la réutilisabilité.
 
 

Reply

Marsh Posté le 01-07-2005 à 11:36:38    

Je ne vois pas trop l'interêt de sépararer structure et attributs :heink:
 
Pour les onclick, un JS externe et le tout est joué. Pour le reste, pas beaucoup d'interêt :(

Reply

Marsh Posté le 01-07-2005 à 11:41:36    

aminebousta a écrit :

Mais que cette fonctionnalité ne soit pas bien c'est ça que je ne comprends pas.  
Tout ce qui peut permettre de centraliser et d'externaliser les propriétés des tags peut être vraiment utile pour la rapidité des modifications et la réutilisabilité.


Les CSS sont des propriétés, mais les éléments comme "onclick" ou "id" ne sont pas des propriétés mais des attributs, ce n'est pas du tout au même niveau.
 
À part pour le fait que je n'ai strictement rien compris à la logique de ton post, les attributs évènementiels (onclick, onload, onmouseover, ...) sont parfaitement gérable depuis un fichier Javascript externe, sans jamais y faire référence directement dans l'élément HTML [:spamafote]  
 
Pour ce qui reste, id, name, class, ce ne sont pas des choses associées à un élément, ce sont des composantes intrinsèques de l'élément le qualifiant, ça n'aurait donc aucun sens de les déporter.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 11:55:54    

Ok je vois la différence entre attributs et propriétés.
 
Même si on met les fonctions dans un fichier JS externe, je suis obligé d'y faire référence au sein du tag concerné avec l'attribut onClick directement dans le HTML.
 
En ce qui concerne les applications d'externaliser le onClick :
 
Imaginons que nous ayons un taglib JSP qui ne sait pas rendre l'attribut onClick mais seulement de la propriété "class". Ca arrive souvent. Dans ce cas là je suis coincé, je ne peux pas mettre dans la balise résultante de ce taglib un truc du genre onClick="javascript:xxx()".
Si j'avais pu le définir dans un fichier css ça aurait marché en appelant le bon class. Mais ce n'est pas possible à priori d'après ce que j'ai compris.  
Je n'ai plus qu'à essayer de récupérer le code source du taglib pour le trafiquer et y ajouter une option "onClick".
 
Je sais que c'est un cas particulier mais moi ça m'arrive souvent.
 
 
Ensuite. Imaginons que nous voulions qu'un petit DIV flottant apparaisse lorsqu'on clique uniquement sur des images ayant pour classe "xx".
Nous avons un site de 300 pages déjà fait et 25% des images ont ce style css xx.
Il va falloir les trouver et mettre un onMouseOver="javascript:tip()" sur toutes les images du site.  
Dommage, j'aurais bien aimé pouvoir simplement définir dans un fichier externe que toutes les balises ayant ce style xx prennent l'attribut onMouseOver="javascript:tip()"
Et du coup plus tard j'aurais pu retirer cette fonction à tous en deux secondes ou bien appeler une autre méthode JS si des modifications sont demandées. Sans avoir à chercher/modifier toutes les balises.
 
 
 
 
 

Reply

Marsh Posté le 01-07-2005 à 12:02:52    

aminebousta a écrit :

Même si on met les fonctions dans un fichier JS externe, je suis obligé d'y faire référence au sein du tag concerné avec l'attribut onClick directement dans le HTML.


Je suis pas allé plus loin dans ton post et je répondrais uniquement à cette affirmation péremptoire par:
 
non, absolument pas [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 12:10:18    

Est-ce que tu as un peu de temps pour m'expliquer ta méthode?
 
Tu parles peut-être de l'idée de mettre un onClick sur la balise body qui appelle une méthode Javascript qui va parcourir l'objet document pour rechercher toutes les images et qui n'exécute l'action que si le class de l'image est "xx" ?
 
Ou bien c'est autre chose?
 

Reply

Marsh Posté le 01-07-2005 à 12:17:37    

Reply

Marsh Posté le 01-07-2005 à 12:20:30    

aminebousta a écrit :

Il va falloir les trouver et mettre un onMouseOver="javascript:tip()" sur toutes les images du site.  
Dommage, j'aurais bien aimé pouvoir simplement définir dans un fichier externe que toutes les balises ayant ce style xx prennent l'attribut onMouseOver="javascript:tip()"
Et du coup plus tard j'aurais pu retirer cette fonction à tous en deux secondes ou bien appeler une autre méthode JS si des modifications sont demandées. Sans avoir à chercher/modifier toutes les balises.


Ca prend 2 secondes et 4 lignes à faire [:spamafote]  

Reply

Marsh Posté le 01-07-2005 à 12:20:39    

aminebousta a écrit :

Tu parles peut-être de l'idée de mettre un onClick sur la balise body qui appelle une méthode Javascript qui va parcourir l'objet document pour rechercher toutes les images et qui n'exécute l'action que si le class de l'image est "xx" ?


Ca y ressemble, mais c'est pas exactement ça.
 
http://forum.hardware.fr/forum2.ph [...] 2#t1135362  
pour un exemple
 
edit: fuck, grillé [:sisicaivrai]


Message édité par masklinn le 01-07-2005 à 12:21:23

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 12:42:16    

Merci pour le lien :)
C'est vrai que ce n'est pas la mort à écrire!
De plus ça répond totalement à ma problématique au niveau de la maintenance. Sauf qu'au lieu de corriger un fichier css on va corriger un fichier JS externe.
Donc ça me va bien.
 
Ceci-dit, je me permets de revenir quand même une dernière fois sur ce sujet.
La plupart d'entre vous m'ont répondu un petit peu à côté. Je demandais si quelque chose était simplement possible par simple curiosité. Pas si c'était bien ou mal, ou utile/inutile.
 
J'ai fait une recherche en-dehors de ce forum pour trouver la réponse et j'ai trouvé ceci :
 
<style>
a.button5 {background-image:url("button_off.gif" );}
a.button5:hover {background-image:url("javascript:alert(this);" )}
</style>
 
J'ai testé, ça marche (en appelant une autre méthode que ça puisque "this" n'existe pas)
 
Bien sûr c'est mal, c'est vilain, on devrait le faire en Javascript, c'est une honte et cette personne (dont je garde l'anonymat pour lui éviter des problèmes) devrait être pendue pour l'exemple.
 
Mais bon voilà ma curiosité est entièrement satisfaite.  
Je sais que c'est possible à faire et vous m'avez donné d'autres moyens de le faire qui respecte plus l'usage initial de CSS.
 
Merci pour votre réactivité en tous cas, je ne pensais pas que j'aurais autant de réponses aussi vite :)

Reply

Marsh Posté le 01-07-2005 à 12:44:16    

OH MON DIEU §§§§§§§§§§§§

Reply

Marsh Posté le 01-07-2005 à 12:45:10    

aminebousta a écrit :


<style>
a.button5 {background-image:url("button_off.gif" );}
a.button5:hover {background-image:url("javascript:alert(this);" )}
</style>


Il y a de fortes chances que ça ne fonctionne que sous MSIE [:aloy]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed