effet surbrillance sur un tableau ???

effet surbrillance sur un tableau ??? - HTML/CSS - Programmation

Marsh Posté le 30-04-2005 à 11:02:44    

Salut,
 
Je souhaiterais realisé un tableau qui contienne les elements de ma base de donnée ,puis à partir de ce tableau j aimerais que lorsque je passe le curseur de la souris dessus une ligne du tableau que cette ligne soit en surbrillance(quelle change de couleur) et que lorsque je clique sur cette ligne , je transfere les elements de cette ligne sur un autre formulaire.
 
Je vois vraiment pas comment faire
si vous pouviez m aider
Merci d avance à tous

Reply

Marsh Posté le 30-04-2005 à 11:02:44   

Reply

Marsh Posté le 30-04-2005 à 11:41:07    

pour l'effet de surbrillance, le CSS fera très propre.  [:aras qui rit]  
tu te fait par exemple une classe speciale --> .surbrillance { }
et tu la rend effective pour tes cellules du tableau soit:

Code :
  1. .surbrillance td {
  2. background-color: white;
  3. // là tu specifie un background
  4. }


 
puis lorsque le curseur survole la cellule avec hover:

Code :
  1. .surbrillance td:hover {
  2. background-color: silver;
  3. // là tu specifie un background lorsque le curseur passe dessus.
  4. }


 
 
Après pour le formulaire je vais laisser les habitués repondre je suis pas casé.  :jap:

Reply

Marsh Posté le 30-04-2005 à 12:02:00    

Note que la solution de pmusa ne fonctionnera pas sous Internet Explorer, mais on s'en balance ;) Utilise-la telle quelle :jap:

Reply

Marsh Posté le 30-04-2005 à 15:39:53    

le truc c est que j utilise internet explorer

Reply

Marsh Posté le 30-04-2005 à 15:48:29    

et ce qu il y a c est que je ne connais pas trop les css tu serai ou je pourrai trouver des exemple SVP
hover ?je vois se que c est

Reply

Marsh Posté le 30-04-2005 à 16:06:57    

avec du JS ça doit bin être possible mais moi et le JS on fait pas la paire. :/ et pis le JS c'est mal.
hover c'est un apocope pour "hand over" (main dessus). la main c'est ton curseur.
 
sinon tu peux aussi utiliser FF. http://www.designlaboratory.net/smileyyyy/mimi.gif

Reply

Marsh Posté le 30-04-2005 à 16:08:39    

je voulais dire je vois pas ce que c est hover
et FF c est quoi ?
et je peux avec les css faire apparaitre une nouvellepage quand je clique sur la ligne du tableau

Reply

Marsh Posté le 30-04-2005 à 16:17:02    

FF = FireFox, le navigateur qui vous veut du bien.
le CSS sert uniquement pour formater la presentation de ta page. Tu peux pas faire ce genre de truc avec du CSS. si tu veux ouvrir une nouvelle fenêtre il te faudra du JS ( JavaScript ) -->  
OnClick="window.open()" et ses paramètres. je ne saurai t'en dire plus, je ne suis pas LA reference...
je ne sais pas dans quel contexte tu veux appliquer ça (surtout une cellule  :??: ) mais tu peux te debrouiller avec target="_blank" (c'est mal je sais. http://www.designlaboratory.net/smileyyyy/ilestla.gif)

Reply

Marsh Posté le 01-05-2005 à 11:32:40    

Salut donny3,
il y a longtemps j'ai utilisé ce script (mélange de javascript et de css).
le problème c'est que celui-ci est très répétitif (donc lourd à mettre en place).  :heink:  
il s'applique à la balise "td", voici le code :

Code :
  1. <td bgcolor="#F1F2F3" width="100%" border="0" onmouseover="this.style.background='#FFFFFF'" onmouseout="this.style.background='#F1F2F3'">Blablabla</td>


A toi de voir si tu le juges utiles, à priori il marche sur tous les navigateurs (testé sous IE5, IE6 et FireFox).
Pour le transfert sur un formulaire, tu peux utiliser un script php qui envoie toutes les données dans l'adresse vers la page du formulaire et dans les "input" ou "area" tu mets la variable en question dans la propriété "value='$exemple'". je ne cerne pas assez ton idée pour bien me prononcer là dessus.
A la prochaine !  
Huitzi

Reply

Marsh Posté le 01-05-2005 à 12:01:25    

pmusa a écrit :

avec du JS ça doit bin être possible mais moi et le JS on fait pas la paire. :/ et pis le JS c'est mal.


Non, le JS c'est très bien, simplement il faut l'utiliser correctement [:spamafote]  

Huitzilopoc a écrit :

Salut donny3,
il y a longtemps j'ai utilisé ce script (mélange de javascript et de css).
le problème c'est que celui-ci est très répétitif (donc lourd à mettre en place).  :heink:  
il s'applique à la balise "td", voici le code :

Code :
  1. <td bgcolor="#F1F2F3" width="100%" border="0" onmouseover="this.style.background='#FFFFFF'" onmouseout="this.style.background='#F1F2F3'">Blablabla</td>



Dégage avec ton code de merde [:mmmfff]  
 
Donny > pour le transfert d'informations d'un endroit à un autre, c'est obligatoirement du JS et c'est pas une bonne idée (~10% des gens surfent avec le JS désactivé), pour la surbrillance CSS + un peu de JS pour MSIE et ça roule.
 
Maintenant la question: pourrait-on avoir un exemple précis, histoire de comprendre ce que tu veux transférer comme informations et à quelles fins


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

Marsh Posté le 01-05-2005 à 12:01:25   

Reply

Marsh Posté le 01-05-2005 à 12:36:19    

Le JS pour ce type d'effet pas du tout indispensable à la navigation, c'est bien [:spamafote] (enfin c'est sûr que si on peut s'en passer autant le faire hein...)
 
Avec le code CSS posté plus haut, ca changera bien la couleur de toute la ligne? Je peux me tromper, mais il me semble que seule la case courante changera de couleur.

Reply

Marsh Posté le 01-05-2005 à 15:10:41    

Utilise "tr" si tu veux que toute la ligne change de couleur et non pas uniquement la cellule.
 
Et puis faudrait arreter de diaboliser le JS.
Le JS est parfois la seule solution pour faire certains trucs.
Le probleme du JS c'est qu'il n'y a pas beacoup de monde qui sait bien l'utiliser, et qu'il existe beacoup de sites qui proposent des scripts totalement merdiques.
Du coup le JS a une mauvaise reputation :/
 
Allez un petit lien interessant :
JavaScript: The World's Most Misunderstood Programming Language


Message édité par cerel le 01-05-2005 à 15:10:57
Reply

Marsh Posté le 01-05-2005 à 15:26:45    

Ayuget a écrit :

(enfin c'est sûr que si on peut s'en passer autant le faire hein...)


C'est le contraire :o
 
À part dans certains cas bien spécifiques, le Javascript ne doit exister que quand on peut s'en passer (aka que le fait qu'il soit désactivé ou non supporté par le navigateur courant ne gêne pas), il est là pour améliorer l'expérience de l'utilisateur et DOIT être optionnel.
 
Je te conseille l'article Progressive Enhancement and the Future of Web Design, il est extrèmement intéressant et instructif, très bien pensé.

cerel a écrit :

Le probleme du JS c'est qu'il n'y a pas beacoup de monde qui sait bien l'utiliser, et qu'il existe beacoup de sites qui proposent des scripts totalement merdiques.
Du coup le JS a une mauvaise reputation :/


 :jap:  

Citation :

Allez un petit lien interessant :
JavaScript: The World's Most Misunderstood Programming Language


J'le connais celui là [:gilbert gosseyn]  
 
À visiter également, Tuto Javascript de How To Create et l'impressionnant Quirksmode (HTML/CSS assez moyen, mais j'ai jamais vu un site d'aussi haut niveau en quantité et qualité d'informations sur le JS [:jofusion] )
 
Il est également possible de visiter Novemberborn (allez visiter les archives) et si vous avez quelques semaines de libres le blog de Simon Willison a non seulement d'excellents articles mais également des blogmarks et des liens vers divers blogs assez hallucinants [:youpi] c'est une sorte de bookmark à bookmarks [:huit]


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

Marsh Posté le 03-05-2005 à 19:58:34    

Merci de m avoir repondu
en faite je veux realiser une interface pour base donnée
et a l instar de access je voudrai creer des tableaux dans des formulaires et lorsqu on clique sur la ligne bin sa ouvre une nouvelle fenetre avec les donnée de ligne et alors on peux les modifier dans la base de donnée par la suite

Reply

Marsh Posté le 03-05-2005 à 21:14:12    

J ai fait cela comme lu vu que je n y connais pas grand chose

Code :
  1. <html>
  2. <head>
  3. <script langage="javascript">
  4. </script>
  5. </head>
  6. <body>
  7. <table>
  8. <tr>
  9. <td bgcolor="#F1F2F3" width="100%" border="0" onmouseover="this.style.background='#FFFFFF'" onmouseout="this.style.background='#F1F2F3'">Blablabla</td>
  10. </tr>
  11. </table>
  12. </body>
  13. </html>


 
il n y aurai pas une option qui permette de laisser la ligne ou la cellule en surbrillance quand on clique dessus.
 

Reply

Marsh Posté le 17-05-2005 à 18:34:43    

Salut donny, c'est re-moi. je suis tombé par hasard, sur un script JavaScript qui devrait bien t'interesser.  

Code :
  1. <script language="Javascript">
  2. function Fondcouleur(){
  3. TR = document.getElementsByTagName('tr');
  4. n  = TR.length;
  5. for(i=0; i<n; i++){
  6. TR[i].onclick = function(){
  7. this.bgColor = (this.bgColor=='')?'#cccccc':'';
  8. }}}
  9. </script>
  10. <body onload="Fondcouleur()">
  11. <table width="100%">
  12.   <tr>
  13.     <td>1</td>
  14.     <td>Première ligne</td>
  15.   </tr>
  16.   <tr>
  17.     <td>2</td>
  18.     <td>Deuxième ligne</td>
  19.   </tr>
  20.   <tr>
  21.     <td>3</td>
  22.     <td>...</td>
  23.   </tr>
  24. </table>


Voilà, à la prochaine. :jap:  

Reply

Marsh Posté le 17-05-2005 à 18:44:06    

Huitzilopoc a écrit :

Salut donny, c'est re-moi. je suis tombé par hasard, sur un script JavaScript qui devrait bien t'interesser.  

Code :
  1. ...


Voilà, à la prochaine. :jap:


 :sweat:
 
Wai, le code de merde et le surlignage non désactivable


Message édité par masklinn le 17-05-2005 à 18:45:07

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

Marsh Posté le 18-05-2005 à 10:44:33    

Un petit mix des deux (JS et CSS)
 

Code :
  1. <tr class="color1" onmouseover="surligne(this)" onmouseout="surligne(this)" onclick="selectLigne(this, arg1, ...)">


 
avec les fonctions :
 

Code :
  1. function surligne( thisOBJ)
  2. { if( thisOBJ.className=='color1')
  3.        thisOBJ.className='color2';
  4.   else thisOBJ.className='color1';
  5. }
  6. function selectLigne( thisOBJ, arg1, ...)
  7. { surligne( thisOBJ);
  8.   ...
  9. }


 
La même fonction pour onmouseover et onmouseout avec un petit test d'état.
Et passage d'argument pour la seconde fonction pour faire tout ce que tu voudras ...
 
Bon courage.

Reply

Sujets relatifs:

Leave a Replay

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