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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Inversion de couleurs [Résolu]

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Inversion de couleurs [Résolu]

n°974165
mirascheat
Posté le 07-02-2005 à 15:52:33  profilanswer
 

Bonjour,
Je pense que c'est un cas d'école mais je n'ai rien trouver de simple sur le net qui pourrait m'aider.
J'ai mis un lien dans une case d'un tableau et je voudrais lorsque le curseur de la souris survole le lien que la couleur de la case de mon tableau et la couleur de mon texte s'inversent ...
Est ce que quelqu'un à une piste pour commmencer à m'aider ?
Par avance merci.


Message édité par mirascheat le 08-02-2005 à 12:15:05
mood
Publicité
Posté le 07-02-2005 à 15:52:33  profilanswer
 

n°974169
FlorentG
Unité de Masse
Posté le 07-02-2005 à 15:57:22  profilanswer
 

:??:
Ben tu inverses les deux couleurs dans ton CSS

n°974171
mirascheat
Posté le 07-02-2005 à 15:58:30  profilanswer
 

Oui mais c'est facile à voir quand on maitrise bien le CSS ...

n°974172
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 15:58:31  profilanswer
 

mirascheat a écrit :

Bonjour,
Je pense que c'est un cas d'école mais je n'ai rien trouver de simple sur le net qui pourrait m'aider.
J'ai mis un lien dans une case d'un tableau et je voudrais lorsque le curseur de la souris survole le lien que la couleur de la case de mon tableau et la couleur de mon texte s'inversent ...
Est ce que quelqu'un à une piste pour commmencer à m'aider ?
Par avance merci.


 
Javascript.
 

Code :
  1. document.getElementById('id_de_l_element_a_changer').style.color = "#FF0000"; (pour du rouge par exemple)


 
Possible également avec des CSS, mais passera pas sous IE.

n°974175
FlorentG
Unité de Masse
Posté le 07-02-2005 à 15:59:21  profilanswer
 

mirascheat a écrit :

Oui mais c'est facile à voir quand on maitrise bien le CSS ...


Ben sans CSS, impossible de faire un site, ou alors tu le fais façon y'a dix ans sous NS4 :/

n°974176
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 15:59:27  profilanswer
 

FlorentG a écrit :

:??:
Ben tu inverses les deux couleurs dans ton CSS


 
Pour tout ce qui est lien, pas de problème, mais pour une cellule de table, c'est niqué. [:spamafote] JS obligatoire d'une manière ou d'une autre.

n°974178
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:00:46  profilanswer
 

Hermes le Messager a écrit :

Pour tout ce qui est lien, pas de problème, mais pour une cellule de table, c'est niqué. [:spamafote] JS obligatoire d'une manière ou d'une autre.


Ah oui, effectivement :jap:  
 
Ben JS obligatoire alors...

n°974179
mirascheat
Posté le 07-02-2005 à 16:00:55  profilanswer
 

@ FlorentG : oui je sais il va falloir que je me donne un bon coup de pierd au derrière ...
@ Hermes le Messager : je vais essayer de comprendre ce que tu as écrit ... merci

n°974183
mirascheat
Posté le 07-02-2005 à 16:01:59  profilanswer
 

Le "getElementById" c'est un id pour la cellule de mon tableau ?

n°974184
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:02:38  profilanswer
 

Ouaip sinon y'a moyen sans passer par là, avec les évènements onmouseover. Tu t'y connais en JS ?

mood
Publicité
Posté le 07-02-2005 à 16:02:38  profilanswer
 

n°974186
mirascheat
Posté le 07-02-2005 à 16:03:58  profilanswer
 

non :( mais je vais qd même essayer de comprendre

n°974188
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:05:18  profilanswer
 

Sinon faut donner un id au tableau. Puis un script rajoute automatiquement l'évemenement onmouseover et onmouseout, qui vont gérer le changement de couleur.

n°974191
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 16:05:41  profilanswer
 

mirascheat a écrit :

@ FlorentG : oui je sais il va falloir que je me donne un bon coup de pierd au derrière ...
@ Hermes le Messager : je vais essayer de comprendre ce que tu as écrit ... merci


 
Dans le HTML : ... id="zobi" onmouseover="javascript:survol('zobi'); " onmouseout="javascript:etpuissenva('zobi'); " ...
 
Pour le JS, tu crées deux fonctions, une survol(element) et une autre etpuissenva(element)
 
Dans ces fonctions, tu utilises le procédé montré dans mon message plus haut. Rien de compliqué.
 
Si tu ne comprends toujours pas ce que je te dis, tu fais dans l'ordre :
 
- Apprendre le (X)HTML + CSS et bien comprendre l'emploi des id et des class.
- Apprendre ce qu'est une fonction javascript + des comportements.
- Avoir quelques notions sur les "objets javascript".
 

n°974196
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 16:07:05  profilanswer
 

FlorentG a écrit :

Sinon faut donner un id au tableau. Puis un script rajoute automatiquement l'évemenement onmouseover et onmouseout, qui vont gérer le changement de couleur.


 
Dans son cas, je lui conseille d'abord de tenter de procéder comme je le lui ai montré... Ce sera un peu plus facile pour la compréhension déjà...  :D  

n°974198
mirascheat
Posté le 07-02-2005 à 16:07:33  profilanswer
 

ok je vais essayer ... merci pour le départ

n°974199
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:07:55  profilanswer
 

Hermes le Messager a écrit :

Dans son cas, je lui conseille d'abord de tenter de procéder comme je le lui ai montré... Ce sera un peu plus facile pour la compréhension déjà...  :D


C'est sûr ;) Après on pourra lui optimiser son truc à mort :)

n°974285
mirascheat
Posté le 07-02-2005 à 16:44:10  profilanswer
 

J'ai essayé :
dans le head :

Code :
  1. <script language="JavaScript1.2">
  2. function survol(click){
  3. document.getElementById('click').style.color = "#000000"
  4. }
  5. function etpuissenva(click){
  6. document.getElementById('click').style.color = "#FFFFF"
  7. }
  8. </script>


 
dans le body :

Code :
  1. <div class="click">
  2. <td width="10%"><a href="bas.html" target="bas" class="NS" onmouseover="javascript:survol('click'); "
  4. onmouseout="javascript:etpuissenva('click'); "><b>Home</b></a></td>
  6. </div>


marche pas of course
 
Je continue ... mais si quelqu'un peut m'aider je prends bien sur ;)

n°974291
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:47:21  profilanswer
 

getElementById


<div class="click">


 
id et class, c'est pas la même chose ;)

n°974305
mirascheat
Posté le 07-02-2005 à 16:53:12  profilanswer
 

J'ai changé pour ca :
 
dans le head :

Code :
  1. function survol(click){
  2. document.getElementById('click').style.color = "#000000"
  3. document.getElementById('click').style.background-color = "#FFFFFF"
  4. }
  5. function etpuissenva(click){
  6. document.getElementById('click').style.color = "#FFFFFF"
  7. document.getElementById('click').style.background-color = "#000000"
  8. }


 
dans le body :

Code :
  1. <td width="10%"><a href="bas.html" target="bas" class="NS" id="click" onmouseover="javascript:survol('click'); "
  3. onmouseout="javascript:etpuissenva('click'); "><b>Home</b></a></td>


pas top non plus :(

n°974309
FlorentG
Unité de Masse
Posté le 07-02-2005 à 16:55:06  profilanswer
 

Tu peux pas avoir plusieurs id, un seul élément peut avoir un id unique.
 
Remplace dans tes fonctions les document.getElementById('click') par this, et tu pourra aussi enlever le paramètre click pour ne garder que un truc du genre javascript:survol()

n°974434
mirascheat
Posté le 07-02-2005 à 18:20:13  profilanswer
 

non sincerement je vois pas ... pourquoi dis-tu que mon element a plusieurs id ...
Mon element : cellule de mon tableau a comme id : click
N'est ce pas le cas ?

n°974437
FlorentG
Unité de Masse
Posté le 07-02-2005 à 18:24:13  profilanswer
 

j'voulais dire plusieurs éléments et un seul id. Genre tu peux pas avoir deux <td> qui ont le même id

n°974442
mirascheat
Posté le 07-02-2005 à 18:26:31  profilanswer
 

oui mais dans mon cas je vais avoir le meme comportement pour plusieurs cellules de mon tableau (même inversion de couleur)
je vais pas creer des fonctions pour chaque cellule qd meme , non ?

n°974444
masklinn
í dag viðrar vel til loftárása
Posté le 07-02-2005 à 18:27:22  profilanswer
 

mirascheat a écrit :

J'ai essayé :
dans le head :

Code :
  1. <script language="JavaScript1.2">
  2. function survol(click){
  3. document.getElementById('click').style.color = "#000000"
  4. }
  5. function etpuissenva(click){
  6. document.getElementById('click').style.color = "#FFFFF"
  7. }
  8. </script>



<script type="text/javascript"></script>
 [:aloy]  
 
pas language [:aloy]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°974446
mirascheat
Posté le 07-02-2005 à 18:28:52  profilanswer
 

je pense que ca ne change rien non ?

n°974450
FlorentG
Unité de Masse
Posté le 07-02-2005 à 18:33:24  profilanswer
 

Si, ça change tout, l'attribut language n'existe plus ;)

n°974458
mirascheat
Posté le 07-02-2005 à 18:37:23  profilanswer
 

Bein en tout cas j'ai fait le changement et ca ne change rien ...
J'aimerai deja que ca marche pour un td aveant de m'attaquer au fait que ca marche pour plusieurs td :(

n°974459
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 18:37:42  profilanswer
 

mirascheat a écrit :

oui mais dans mon cas je vais avoir le meme comportement pour plusieurs cellules de mon tableau (même inversion de couleur)
je vais pas creer des fonctions pour chaque cellule qd meme , non ?


 
bien sûr que non.
 
Fait un id par td (et non par a) et ensuite passe cet id dans l'appel de ta fonction : survol('click1') par exemple...

n°974461
mirascheat
Posté le 07-02-2005 à 18:38:42  profilanswer
 

et je suppose que qd je fais appel a une fonction je dois preciser dans mon html "javascript:funtion()" alors qu'avant je n'avais pas besoin du "javascript:" c'est le cas ?

n°974464
FlorentG
Unité de Masse
Posté le 07-02-2005 à 18:39:50  profilanswer
 

Ou alors ne met pas d'id, et dans la fonction tu peux utiliser 'this' qui permet de faire référence à l'objet appelant.

n°974466
mirascheat
Posté le 07-02-2005 à 18:41:39  profilanswer
 

c'est ce que je voulais faire en effet ;)

n°974468
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 18:45:28  profilanswer
 

mirascheat a écrit :

et je suppose que qd je fais appel a une fonction je dois preciser dans mon html "javascript:funtion()" alors qu'avant je n'avais pas besoin du "javascript:" c'est le cas ?


 
exact.  :)  

n°974470
mirascheat
Posté le 07-02-2005 à 18:45:52  profilanswer
 

Citation :

et je suppose que qd je fais appel a une fonction je dois preciser dans mon html "javascript:funtion()" alors qu'avant je n'avais pas besoin du "javascript:" c'est le cas ?


 
quelqu'un peut me confirmer ca ?


Message édité par mirascheat le 07-02-2005 à 18:46:34
n°974474
masklinn
í dag viðrar vel til loftárása
Posté le 07-02-2005 à 18:48:04  profilanswer
 

mirascheat a écrit :

Citation :

et je suppose que qd je fais appel a une fonction je dois preciser dans mon html "javascript:funtion()" alors qu'avant je n'avais pas besoin du "javascript:" c'est le cas ?


 
quelqu'un peut me confirmer ca ?


me semble pas


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°974476
mirascheat
Posté le 07-02-2005 à 18:48:54  profilanswer
 

alors je suis pas obligé d'écrire "javascript:" dans mes appels de fonctions ?
ca semble marcher sans ...

n°974480
masklinn
í dag viðrar vel til loftárása
Posté le 07-02-2005 à 18:53:08  profilanswer
 

Citation :

<INPUT NAME="userName" onblur="validUserName(this.value)">


Tiré du document de la norme HTML 4.01, site du W3C,  je vois pas mieux comme source :o
 
ça doit servir si tu as une fonction nommée de la même manière dans plusieurs langages de scripts différents (JS, VBScript, Tcl, ...)


Message édité par masklinn le 07-02-2005 à 18:54:04

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°974482
Hermes le ​Messager
Breton Quiétiste
Posté le 07-02-2005 à 18:53:54  profilanswer
 

mirascheat a écrit :

alors je suis pas obligé d'écrire "javascript:" dans mes appels de fonctions ?
ca semble marcher sans ...


 
Tu peux t'en passer, mais moi, j'ai pris l'habitude de le mettre. [:spamafote]

n°974483
mirascheat
Posté le 07-02-2005 à 18:54:08  profilanswer
 

Merci ;)

n°974488
mirascheat
Posté le 07-02-2005 à 18:56:51  profilanswer
 

Now :
dans le head :

Code :
  1. <script type="text/javascript">
  2. function survol(click){
  3. click.style.color = "#000000"
  4. click.style.bgcolor = "#FFFFFF"
  5. }
  6. function etpuissenva(click){
  7. click.style.color = "#FFFFFF"
  8. click.style.bgcolor = "#000000"
  9. }
  10. </script>


dans le body :

Code :
  1. <td width="10%"><a href="bas.html" target="bas" class="NS" onmouseover="javascript:survol(this)" onmouseout="javascript:etpuissenva(this)"><b>Home</b></a></td>


 
Le changement de couleur pour le texte est bon pour chaque td par contre la couleur de fond de la cellule ne change pas ... est-il possible d'appliquer deux modifications en meme temps a un meme element ?

n°974492
masklinn
í dag viðrar vel til loftárása
Posté le 07-02-2005 à 18:57:44  profilanswer
 

click.style.background-color
:o
bgcolor n'existe pas en CSS :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

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

  Inversion de couleurs [Résolu]

 

Sujets relatifs
[Résolu] Pb dans mon code javascriptmessage déjà lu [Résolu]
Petite boucle qui ne marche pas.... [Résolu][php][expressions régulières]Retour chariot[resolu]
[resolu]utiliser un ejb entity depuis un ejb session[wxWidget] Double buffering [Résolu]
Changer les couleurs des puces??Garder le résultat d'une requete en mémoire avec PHP Part 2 [Résolu]
[wxWidget] Analyser une image [résolu] 
Plus de sujets relatifs à : Inversion de couleurs [Résolu]

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.109 secondes

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