Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1485 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS/JS] Evenements sur un style css

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS/JS] Evenements sur un style css

n°1136802
amineboust​a
Posté le 01-07-2005 à 09:36:41  profilanswer
 

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?

mood
Publicité
Posté le 01-07-2005 à 09:36:41  profilanswer
 

n°1136808
plainsofpa​in
Pingouino's lover
Posté le 01-07-2005 à 09:39:19  profilanswer
 

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
n°1136945
amineboust​a
Posté le 01-07-2005 à 11:08:41  profilanswer
 

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

n°1136953
gatsusat
Posté le 01-07-2005 à 11:09:53  profilanswer
 

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

n°1136955
plainsofpa​in
Pingouino's lover
Posté le 01-07-2005 à 11:10:40  profilanswer
 

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
n°1136961
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 11:12:23  profilanswer
 

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
n°1136974
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 01-07-2005 à 11:18:54  profilanswer
 

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.
 

n°1136981
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 11:21:44  profilanswer
 

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
n°1136983
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 01-07-2005 à 11:23:13  profilanswer
 

Alors là, méa culpa.

n°1136985
FlorentG
Unité de Masse
Posté le 01-07-2005 à 11:24:24  profilanswer
 

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

mood
Publicité
Posté le 01-07-2005 à 11:24:24  profilanswer
 

n°1136987
FlorentG
Unité de Masse
Posté le 01-07-2005 à 11:24:49  profilanswer
 

Oui je suis grillé :o

n°1137000
amineboust​a
Posté le 01-07-2005 à 11:34:33  profilanswer
 

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é.
 
 

n°1137003
FlorentG
Unité de Masse
Posté le 01-07-2005 à 11:36:38  profilanswer
 

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 :(

n°1137011
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 11:41:36  profilanswer
 

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
n°1137041
amineboust​a
Posté le 01-07-2005 à 11:55:54  profilanswer
 

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.
 
 
 
 
 

n°1137058
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 12:02:52  profilanswer
 

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
n°1137073
amineboust​a
Posté le 01-07-2005 à 12:10:18  profilanswer
 

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?
 

n°1137082
zapan666
Tout est relatif
Posté le 01-07-2005 à 12:17:37  profilanswer
 
n°1137086
FlorentG
Unité de Masse
Posté le 01-07-2005 à 12:20:30  profilanswer
 

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]  

n°1137087
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 12:20:39  profilanswer
 

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
n°1137109
amineboust​a
Posté le 01-07-2005 à 12:42:16  profilanswer
 

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 :)

n°1137111
FlorentG
Unité de Masse
Posté le 01-07-2005 à 12:44:16  profilanswer
 

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

n°1137112
masklinn
í dag viðrar vel til loftárása
Posté le 01-07-2005 à 12:45:10  profilanswer
 

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
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS/JS] Evenements sur un style css

 

Sujets relatifs
[CSS] héritageQuestion simple en CSS : Différence entre Firefox et IE
Besoin d'aide diverses en CSS [note en bas de page]CSS: largeur variable et blockquote
Pb CSS pour un affichage de menus fixe à droiteCSS : question sur l'avenir
Insertion flash et CSSCSS pour impression
[CSS] bug background-imageCSS - Questions de débutant
Plus de sujets relatifs à : [CSS/JS] Evenements sur un style css


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR