Un clic et le bgcolor change!

Un clic et le bgcolor change! - HTML/CSS - Programmation

Marsh Posté le 10-03-2005 à 01:45:57    

Salut à tous,
petit précision préliminaire, je débute.  :jap:  
 
Est-ce possible (et comment) de faire changer le bgcolor d'un tableau, ou d'ailleurs n'importe lequel de ses attributs, en cliquant dessus?
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 01:45:57   

Reply

Marsh Posté le 10-03-2005 à 07:35:04    

Oui, mais tu dois passer par du javascript.
 
Regarde du cote des evenements type "onclick".
Ensuite ce n'est pas "bgcolor" qu'il faut changer, mais plutot les proprietees CSS de l'objet, notament "background-color".

Reply

Marsh Posté le 10-03-2005 à 08:12:27    

Voilà. En version ultra moche, ça donne ça :

Code :
  1. <bidule onclick="javascript: this.style.backgroundColor = '#ff00ff'">...</bidule>

Reply

Marsh Posté le 10-03-2005 à 12:45:19    

FlorentG a écrit :

Voilà. En version ultra moche, ça donne ça :

Code :
  1. <bidule onclick="javascript: this.style.backgroundColor = '#ff00ff'">...</bidule>



 
 
 :bounce:  :bounce:  :bounce:  
 
Alors là!!!! D'enfer!! J'y ai passé 2h hier à tenter d'écrire des scripts pas possible, et là hop!  
 
 :bounce:  :bounce:  :bounce:FlorentG, Président!! :bounce:  :bounce:  
 
Bon mais alors j'ai deux questions supplémentaires:
- est-ce qu'on peut faire en sorte que le onclick modifie plusieurs choses à la fois?
- concernant  ce "this.style..." (que je découvre.  :jap: ) il ne peut affecter que le BackgroundColor? On peut atteindre de la même manière le BorderColor? Le BorderColorDark? Le BorderColorLight?
 
ps: je sais, je sais, je suis exigeant mais là en une ligne de commande FlorentG vient de me remettre un coup d'fouet
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 12:56:34    

ramkin a écrit :

Bon mais alors j'ai deux questions supplémentaires:
- est-ce qu'on peut faire en sorte que le onclick modifie plusieurs choses à la fois?
- concernant  ce "this.style..." (que je découvre.  :jap: ) il ne peut affecter que le BackgroundColor? On peut atteindre de la même manière le BorderColor? Le BorderColorDark? Le BorderColorLight?
 
ps: je sais, je sais, je suis exigeant mais là en une ligne de commande FlorentG vient de me remettre un coup d'fouet
 
 :sol:


Va ptet faloir songer à apprendre le Javascript/ECMA-262 [:itm]  
 
Question 1:
Oui, mais il faut soit savoir quels sont les éléments à affecter (en ayant leur id par exemple) pour pouvoir les désigner dans la fonction JS soit fournir les identificateurs de ces éléments en paramètres d'une fonction quelconque (là encore pour pouvoir les désigner)
Question 2:  
Bien sûr que oui, "this" désigne simplement l'élément dont est originaire l'action et "style" est l'accesseur de la feuille de style, après tu fais ce que tu veux avec


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

Marsh Posté le 10-03-2005 à 13:01:34    

masklinn a écrit :

Va ptet faloir songer à apprendre le Javascript/ECMA-262 [:itm]  


 
Beh, c'est ce que je fais...
 
Je viens d'essayer

Citation :

<table onclick="javascript: this.style.borderColorDark = '#ff00ff'></table>


 
et ça marche pas du tout.  :??:  


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 13:03:10    

[:totoz]  
 
Mais d'où tu sors ton "borderColorDark"? [:totoz]


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

Marsh Posté le 10-03-2005 à 13:06:59    

masklinn a écrit :

[:totoz]  
 
Mais d'où tu sors ton "borderColorDark"? [:totoz]


 
T'as qu'à essayer ça:

Citation :

<table border="5" borderColorDark = "red" bordercolorlight="yellow">
<td>salut</td>
</table>


 
Attention ça marche pas sous Mozilla, mais sous IE oui.
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 13:08:59    

ramkin a écrit :

T'as qu'à essayer ça:

Citation :

<table border="5" borderColorDark = "red" bordercolorlight="yellow">
<td>salut</td>
</table>


 
Attention ça marche pas sous Mozilla, mais sous IE oui.
 
 :sol:


Ok, du brave code de merde qui n'a strictement aucun sens et ne correspond à rien en CSS, super [:spamafote]
 
Désolé hein, mais ton truc tu peux te le carrer profond et faire l'avion avec.
 
http://www.w3.org/TR/REC-CSS1


Message édité par masklinn le 10-03-2005 à 13:11:44

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

Marsh Posté le 10-03-2005 à 13:28:37    

masklinn a écrit :

Ok, du brave code de merde qui n'a strictement aucun sens et ne correspond à rien en CSS, super [:spamafote]
 
Désolé hein, mais ton truc tu peux te le carrer profond et faire l'avion avec.


 
 
Et beh, et beh, faut pas s'emballer comme ça! Ca va pas non!? :ouch:  
je sais pas si tes derniers mots étaient nécessaires. :heink:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 13:28:37   

Reply

Marsh Posté le 10-03-2005 à 13:31:53    

C'était simplement pour te dire que ça ne servait strictement à rien, que tu ne pourrais jamais rien en faire et que tenter de les utiliser était grosso modo équivalent à pisser dans un violon (sauf que pisser dans un violon ça soulage)


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

Marsh Posté le 10-03-2005 à 13:36:34    

masklinn a écrit :

C'était simplement pour te dire que ça ne servait strictement à rien, que tu ne pourrais jamais rien en faire et que tenter de les utiliser était grosso modo équivalent à pisser dans un violon (sauf que pisser dans un violon ça soulage)


 
J'avais compris. C'était surtout pour te dire qu'en général je suis pas fan qu'on me carre des trucs profonds sans mon accord.
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 14:29:34    

Bon, ok, je viens de lire un peu ce qui concerne le W3C, et promis, j'utiliserais plus les BorderColorDark et compagnie... :jap:  
 
Par contre est-ce que quelqu'un peut m'expliquer pourquoi ce code ne marche pas?

Citation :

<table border="5" onmouseup="javascript: this.style.border='5'" onmousedown="javascript: this.style.border ='0'">
<td>salut</td>
</table>


 
Les bordures disparaissent bien quand je clic, mais restent à 0, même quand je dé-clic.
Et pourtant ce même code avec l'attibut backgroundColor marche correctement.


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 14:30:53    

Parce que c'est borderWidth, et pas border tout court ;)

Reply

Marsh Posté le 10-03-2005 à 14:33:36    

FlorentG a écrit :

Parce que c'est borderWidth, et pas border tout court ;)


 
FlorentG a encore frappé. C'était bien ça, merci.  :hello:  
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 14:36:56    

En fait c'est tout simple. Tu prend n'importe quelle propriété CSS, genre

border-color


En sachant que la convention JavaScript veut que les noms de propriété sont de la forme pouetProutTataTotoTutu, tu vire tous les tirets, tu met la première lettre des mots en majuscule, sauf la première, ça donne :

borderColor


:)

Reply

Marsh Posté le 10-03-2005 à 14:41:48    

Où je me trompe, où justement l'emploi de borderColor est à proscrire?
Je ne l'ai pas vu dans la listes officielle des attributs.


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 14:43:04    

border-color fait partie de la recommandation CSS ;)

Reply

Marsh Posté le 10-03-2005 à 14:46:10    

Ouch, la vache!! Si en plus on n'a pas les mêmes choses!  :ouch:  
 
ICI il n'est même pas question de boderColor


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 14:47:08    

ramkin a écrit :

Ouch, la vache!! Si en plus on n'a pas les mêmes choses!  :ouch:  
 
ICI il n'est même pas question de boderColor


La différence c'est que son lien est le site officiel du w3c...[:joce]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 10-03-2005 à 14:56:39    

Je hurle de joie!!! :bounce:  
 
Puisque c'est l'officielle, je vais la prendre, donc.  :D  
En plus j'y vois des attributs comme border-top-color et ainsi de suite qui vont me permettre de faire tout ce que je veux.
 
Merci à tous pour ces précieux conseils et éclairages.  :jap:  
 
'm'en vais m'faire un peu de lecture,moi...
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 15:00:01    

ramkin a écrit :

Ouch, la vache!! Si en plus on n'a pas les mêmes choses!  :ouch:  
 
ICI il n'est même pas question de boderColor


Ce sont des attributs HTML ça, on te parle d'attributs CSS


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

Marsh Posté le 10-03-2005 à 15:01:20    

ramkin a écrit :

Ouch, la vache!! Si en plus on n'a pas les mêmes choses!  :ouch:  
 
ICI il n'est même pas question de boderColor


non ca c'est les attribut pour html 4.01 par pour les css :o


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 10-03-2005 à 15:01:39    

[:benou_grilled]


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 10-03-2005 à 15:07:57    

qu'est-ce qui se passe??  :??:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 17:39:54    

Bon beh, voilà, pour vous montrer que je chaume pas, je vous mets ce que je voulais faire:

Citation :

<html>
<head>
 
<STYLE type="text/css">
 
.clic_up
 {border-style:outset;
 border-top-color:eeeeee;
 border-left-color:eeeeee;
 border-right-color:111111;
 border-bottom-color:111111;
 border-width:6px;}
.clic_down
 {border-style:outset;
 border-top-color:aaaaaa;
 border-left-color:999999;
 border-right-color:ffffff;
 border-bottom-color:ffffff;
 border-width:5px;};
</STYLE>
</head>
 
<body>
 
<table class="clic_up" onmousedown="javascript: this.className='clic_down'" onmouseup="javascript:  
 
this.className='clic_up'">
<td>salut</td>
</table>
 
</body>
</html>


 
C'est pas grand chose, mais c'est beaucoup.  :bounce: C'est juste un petit bouton qui réagit au clic, mais dont on contrôle intégralement chaque bordure, son epaisseur, sa couleur; bref tout ce que je voulais...
 
Ca m'a fait ma petite introduction au CSS et je remercie tout le monde pour cette mise sur la voie éclair. Parce que du peu que je viens de découvrir, ça ouvre effectivement de supers perspectives.
 
 :sol:


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 22:20:36    

Faut jamais mettre les balises en majuscule ;)

Reply

Marsh Posté le 10-03-2005 à 22:37:25    

FlorentG a écrit :

Faut jamais mettre les balises en majuscule ;)


 
Tu dis ça rapport au javascript?


---------------
Heureusement que par-delà l'infini, quand il ne reste plus aucun espoir, veille le capitaine Flam...
Reply

Marsh Posté le 10-03-2005 à 22:48:51    

ramkin a écrit :

Tu dis ça rapport au javascript?


Non, t'as mis <STYLE>, ce qui est invalide en XHTML (essaye une fois d'envoyer ta page avec le type mime application/xhtml+xml, et test sous Firefox -> un zoli message d'erreur :) )

Reply

Marsh Posté le 11-03-2005 à 10:30:53    

masklinn a écrit :

Ok, du brave code de merde qui n'a strictement aucun sens et ne correspond à rien en CSS, super [:spamafote]
 
Désolé hein, mais ton truc tu peux te le carrer profond et faire l'avion avec.
 
http://www.w3.org/TR/REC-CSS1


 

masklinn a écrit :

C'était simplement pour te dire que ça ne servait strictement à rien, que tu ne pourrais jamais rien en faire et que tenter de les utiliser était grosso modo équivalent à pisser dans un violon (sauf que pisser dans un violon ça soulage)


 
surveille ton langage face de gland  [:alana21]
:kaola:  
 
comment j'te claquerai la gueule à répondre comme ça! une bonne gross baf ça te ferait du bien je pense...
 
 
t'as de la chance que ramkin soit resté calme, cpa comment il a fait  
 
P.S: ya que toi qui répond comme ça, je lacherai pas l'affaire tant que tu répondras comme ça  :
kaola:  :kaola:  :kaola:

Reply

Marsh Posté le 11-03-2005 à 10:32:07    

drone a écrit :

surveille ton langage face de gland  [:alana21]
:kaola:  
 
comment j'te claquerai la gueule à répondre comme ça! une bonne gross baf ça te ferait du bien je pense...
 
 
t'as de la chance que ramkin soit resté calme, cpa comment il a fait  
 
P.S: ya que toi qui répond comme ça, je lacherai pas l'affaire tant que tu répondras comme ça  :
kaola:  :kaola:  :kaola:


 
ta gueule.[:itm]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 11-03-2005 à 10:33:16    

non pas tant qu'il continuera...

Reply

Marsh Posté le 11-03-2005 à 10:34:40    

drone a écrit :

non pas tant qu'il continuera...


si tu continues ce genre d'intervention
1) Qui n'apporte rien au topic
2) Qui insulte un membre du forum qui lui, même sans y mettre les formes, répond.
 
c'est toi qui ne vas pas continuer longtemps ici...[:skeye]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 11-03-2005 à 10:41:10    

on est civilisé quand même, on peut répondre sans s'insulter je pense!
 
lui ne s'est pas faire... ça m'énerve les gens qui répondent comme ça surtout que l'auteur du topic précise bien qu'il est DéBUTANT!!!

Reply

Marsh Posté le 11-03-2005 à 10:46:33    

drone a écrit :

on est civilisé quand même, on peut répondre sans s'insulter je pense!
 
lui ne s'est pas faire... ça m'énerve les gens qui répondent comme ça surtout que l'auteur du topic précise bien qu'il est DéBUTANT!!!


Aux dernières nouvelles, la seule véritable insulte que je vois dans ce topic c'est "face de gland"...[:itm]
Donc tu vas voir ailleurs si masklinn y est et basta...si t'as un pb avec lui vous vous expliquez en privé, mais tu viens pas polluer tous les topics où il intervient.


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 11-03-2005 à 10:48:13    

et toi qu'est ce que tu es en train de faire... pose toi la question avant de donner les leçons de morales!

Reply

Marsh Posté le 11-03-2005 à 10:56:37    

[:popcorn]

Reply

Marsh Posté le 11-03-2005 à 11:02:39    

drone a écrit :

pose toi la question avant de donner les leçons de morales!


 
Heu je te retourne ta réflexion... T'arrives comme un zorro sur le topic. Tu te plains de ses "insultes", alors que tu fais bien pire et encore moins justifié.


Message édité par antp le 11-03-2005 à 11:04:24

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 11-03-2005 à 11:07:33    

vas voir les autres topics où il a répondu et tu comprendras.
bref je vais pas débattre 150 ans sur ces conneries.


Message édité par drone le 11-03-2005 à 11:31:24
Reply

Marsh Posté le 11-03-2005 à 11:30:22    

drone a écrit :

surveille ton langage face de gland  [:alana21]
:kaola:  
 
comment j'te claquerai la gueule à répondre comme ça! une bonne gross baf ça te ferait du bien je pense...


 [:totoz]  
non, stp, je, non [:totoz]  

Citation :

P.S: ya que toi qui répond comme ça, je lacherai pas l'affaire tant que tu répondras comme ça  :
kaola:  :kaola:  :kaola:


Non, s'il te plait, ne me regarde pas comme ça [:totoz]  

drone a écrit :

vas voir les autres topics où il a répondu et tu comprendras.


Ils me connaissent hein :sweat:  

Citation :

bref tu vais pas débattre 150 ans sur ces conneries.


C'est toi qui ramène le truc, pas lui [:spamafote]  


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