Evenements sur un style css [CSS/JS] - HTML/CSS - Programmation
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 ...
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.
Marsh Posté le 01-07-2005 à 11:10:40
tu veux faire quoi avec ton rollover ?
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? |
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
C'est comme si tu demandais si on peut associer un évènement à la couleur bleue (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)
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.
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. |
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
Toi ce dont tu parles c'est associer les évènements au HTML et utiliser les CSS pour en styler la sortie
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. |
Non ce n'est pas possible
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é.
Marsh Posté le 01-07-2005 à 11:36:38
Je ne vois pas trop l'interêt de sépararer structure et attributs
Pour les onclick, un JS externe et le tout est joué. Pour le reste, pas beaucoup d'interêt
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. |
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
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.
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.
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
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?
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. |
Ca prend 2 secondes et 4 lignes à faire
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é
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
Marsh Posté le 01-07-2005 à 12:45:10
aminebousta a écrit : |
Il y a de fortes chances que ça ne fonctionne que sous MSIE
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?