Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Javascript] Ligne en couleurs

mofo

Par mofo
dans Programmation

 Partager

Messages recommandés

mofo Mega Power Member

mofo

Posté(e)
Posté(e)

Salut,

 

Certes je peux me prendre la tête pour faire ce bout de script, mais là j'ai pas envie (et pas trop de temps).

 

Je cherche un script comme dans phpmyadmin, quand on survole un <TR> il change de couleur et se recolore une fois la souris en dehors du <TR> et lors d'un clic une autre couleur qui est fixe. Cette dernière couleur s'enlève lors d'un nouveau clic.

 

J'ai essayé de prendre la fonction de phpmyadmin, mais ca ne fonctionne pas.

 

Un petit coup de main à mofo ???

 

Merci

 

PS : dur de poster en cette belle apres midi

tangui Godlike Member

tangui

Posté(e)
Posté(e) 

<td class='' 
   onMouseOut="javascript:this.style.background='#ffffff'" 
   onMouseOver="javascript:this.style.background='#FF0000'" 
   onclick="top.location.href='/lien.html'">

ca devrait marcher...

vinch Full Patch Member

vinch

Posté(e)
Posté(e)

Bonjour,

Il y à aussi moyen de le faire en css:

 

<style type="text/css">
td {
color: #FFFFFF;
}
td a {
width: 100%;
height: 100%;
display: block;
background: #000099;
}
td a:hover {
background: #ccc;
}
td a:active {
background: gray;
}
-->
</style>

 

Dans le tableau:

<table width="75%" border="0" cellspacing="100">
 <tr >
   <td ><a href="">lkjlkjklj</a></td>
   <td><a></a></td>
</tr>
 <tr >
   <td><a href="">fghfghg</a></td>
   <td><a>sdsdsd</a></td>
 </tr>
</table>

 

si tu ne désire pas employé de lien pour une cellule tu emplois juste la balise <a></a> sans href

 

Si tu as plusieur tableau dont certain tu ne veux pas l'effet au lieu d'employer la balise TD en css tu en fais une classe.

Salut

mofo Mega Power Member

mofo

Posté(e)
  • Auteur
Posté(e) (modifié)

Ok j'ai teste

 

Mon CSS

 

test {
color: #FFFFFF;
}
.test a {
width: 100%;
height: 100%;
display: block;
#background: #000099;
}
.test a:hover {
background: #ccc;
}
.test a:active {
background: gray;
}

Et dans mon code

 

<tr class=test><td>nnn</td><td>vvv</td></tr>

 

En fait j'aimerai que quand je passe sur une cellule, toute la ligne change de couleur.

Et quand je clique, toute la ligne soit rouge et reste rouge jusqu'au prochain clic ...

Modifié par mofo
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Déjà, mets des guillemets autour des valeurs des arguments de tes balises :

<td class="test">

Ensuite, si tu veux que ce soit le <td> qui change de couleur, il faut mettre td.test:hover et non .test a:hover (qui n'affecte que le contenu du bloc entourant les balises <a> qui figurent après un objet de classe "test")

Enfin, si vraiment tu souhaites faire des choses plus tordues que "changer le style quand le curseur passe dessus" et "changer le style quand je clique dedans" il va falloir user d'un peu de JavaScript... (tout ça pour dire que je n'ai pas trop compris "toute la ligne soit rouge et reste rouge jusqu'au prochain clic"...)

mofo Mega Power Member

mofo

Posté(e)
  • Auteur
Posté(e)

Ok pour les guillemets, mais là j'ai ecrit le code direct dans le forum (pas fait de copier/coller de mon code à moa).

 

Pour la ligne rouge, c'est le principe de phpMyAdmin, lorsque tu cliques sur une ligne (<TR>) elle change de couleur et devient rouge. Lorsque tu recliques elle retourne dans sa couleur d'origine. Lorsqu'elle est rouge, l'effet de rollover n'a plus d'effet.

 

Je cherche encore.

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
Ok pour les guillemets, mais là j'ai ecrit le code direct dans le forum (pas fait de copier/coller de mon code à moa).

 

Pour la ligne rouge, c'est le principe de phpMyAdmin, lorsque tu cliques sur une ligne (<TR>) elle change de couleur et devient rouge. Lorsque tu recliques elle retourne dans sa couleur d'origine. Lorsqu'elle est rouge, l'effet de rollover n'a plus d'effet.

 

Je cherche encore.

482096[/snapback]

Ouais, c'est bien ce que je craignais, il y a un "état" à gérer pour savoir si la ligne a été sélectionnée ou pas (qui empêche le changement de style lors d'un MouseOut, par exemple)..
  • 2 semaines après...
badaze Power Member

badaze

Posté(e)
Posté(e)

Voici un bout de code que j'ai publié sur un forum italien. Il est aussi possible de cliquer sur la ligne

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.normal1 {font-family:tahoma;font-size:8pt;background-color:yellow}
.normal2 {font-family:tahoma;font-size:8pt;background-color:white}
.overTR  {font-family:tahoma;font-size:8pt;background-color:blue;color:white}
.clicked {font-family:tahoma;font-size:8pt;background-color:red;color:white}
-->
</style>

<script language="JavaScript" type="text/javascript">
var savClass  = "";
var savClass2 = "";
var lastTR    = null;
<!--
function rOver(aTR) {
savClass      = aTR.className;
aTR.className = "overTR";
} // function rOver(aTR)

function rOut(aTR) {
if (aTR.className == "clicked") return;
aTR.className = savClass;
} // rOut(aTR)

function rEvidenzia(tr) {
for (i = 0; i < tr.cells.length; i++) {
var tdata = tr.cells(i);
 if (tdata.style.sav_backgroundColor == null) {
  tdata.style.sav_backgroundColor = tdata.style.backgroundColor;
  tdata.style.sav_color           = tdata.style.color;  
  tdata.style.backgroundColor     = 'green';
  tdata.style.color               = 'white';  
 } else {
  tdata.style.backgroundColor     = tdata.style.sav_backgroundColor;
  tdata.style.color               = tdata.style.sav_color;    
  tdata.style.sav_backgroundColor = null;  
 tdata.style.sav_color           = null;
 } // if (tdata.style.sav_backgroundColor == null)
} // for (i = 0; i < tr.cells.length; i++)
} // function rEvidenzia(tr)

//-->
</script>


</head>
<body>
<table summary="" cellpadding="0" >
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</body>
</html>

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...