Inversion de couleurs [Résolu]

Inversion de couleurs [Résolu] - HTML/CSS - Programmation

Marsh Posté le 07-02-2005 à 15:52:33    

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
Reply

Marsh Posté le 07-02-2005 à 15:52:33   

Reply

Marsh Posté le 07-02-2005 à 15:57:22    

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

Reply

Marsh Posté le 07-02-2005 à 15:58:30    

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

Reply

Marsh Posté le 07-02-2005 à 15:58:31    

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.

Reply

Marsh Posté le 07-02-2005 à 15:59:21    

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

Reply

Marsh Posté le 07-02-2005 à 15:59:27    

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.

Reply

Marsh Posté le 07-02-2005 à 16:00:46    

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

Reply

Marsh Posté le 07-02-2005 à 16:00:55    

@ 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

Reply

Marsh Posté le 07-02-2005 à 16:01:59    

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

Reply

Marsh Posté le 07-02-2005 à 16:02:38    

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

Reply

Marsh Posté le 07-02-2005 à 16:02:38   

Reply

Marsh Posté le 07-02-2005 à 16:03:58    

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

Reply

Marsh Posté le 07-02-2005 à 16:05:18    

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.

Reply

Marsh Posté le 07-02-2005 à 16:05:41    

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

Reply

Marsh Posté le 07-02-2005 à 16:07:05    

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  

Reply

Marsh Posté le 07-02-2005 à 16:07:33    

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

Reply

Marsh Posté le 07-02-2005 à 16:07:55    

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

Reply

Marsh Posté le 07-02-2005 à 16:44:10    

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

Reply

Marsh Posté le 07-02-2005 à 16:47:21    

getElementById


<div class="click">


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

Reply

Marsh Posté le 07-02-2005 à 16:53:12    

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

Reply

Marsh Posté le 07-02-2005 à 16:55:06    

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

Reply

Marsh Posté le 07-02-2005 à 18:20:13    

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 ?

Reply

Marsh Posté le 07-02-2005 à 18:24:13    

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

Reply

Marsh Posté le 07-02-2005 à 18:26:31    

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 ?

Reply

Marsh Posté le 07-02-2005 à 18:27:22    

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
Reply

Marsh Posté le 07-02-2005 à 18:28:52    

je pense que ca ne change rien non ?

Reply

Marsh Posté le 07-02-2005 à 18:33:24    

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

Reply

Marsh Posté le 07-02-2005 à 18:37:23    

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

Reply

Marsh Posté le 07-02-2005 à 18:37:42    

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

Reply

Marsh Posté le 07-02-2005 à 18:38:42    

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 ?

Reply

Marsh Posté le 07-02-2005 à 18:39:50    

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.

Reply

Marsh Posté le 07-02-2005 à 18:41:39    

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

Reply

Marsh Posté le 07-02-2005 à 18:45:28    

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

Reply

Marsh Posté le 07-02-2005 à 18:45:52    

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
Reply

Marsh Posté le 07-02-2005 à 18:48:04    

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
Reply

Marsh Posté le 07-02-2005 à 18:48:54    

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

Reply

Marsh Posté le 07-02-2005 à 18:53:08    

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
Reply

Marsh Posté le 07-02-2005 à 18:53:54    

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]

Reply

Marsh Posté le 07-02-2005 à 18:54:08    

Merci ;)

Reply

Marsh Posté le 07-02-2005 à 18:56:51    

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 ?

Reply

Marsh Posté le 07-02-2005 à 18:57:44    

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
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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