Page 1 sur 1
je cherche a refaire l'affichage de ce tableau
Publié : 10 juil. 2004, 08:18
par Fr.eddoZ
Bonjour je trouve l'affichage de ce forum tres sympa !
J'ai un peu regardé les sources et c'est le onmouseover sur le <tr> que je trouve cool !
il fait appelle a un javascript : highlightRow que j'ai regardé mais je pige pas trop. si j'ai bien compris il switch la class css sur le mousseover mais ou est déterminé la class ???
j'suis un brin paumé, un pitit coup de main ?
Merci, bon dev a tous !
Fred
je vous met le code si ça vous parle mieux ...
Publié : 10 juil. 2004, 12:29
par Fr.eddoZ
Je vous met le code que j'ai recup ça sera peu etre plus parlant ...
vive l'open source
Voila le code sur le <tr> :
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
Le javascript appellé (enfin il me semble ... 
)
<script language="javascript">
function highlightRow(row, onFlag) {
var tdNodes = row.childNodes;
for (var i=0; i<tdNodes.length; i++) {
var tdNode = tdNodes
;
if (tdNode.nodeType != 3) { // type 3 => #text
if (onFlag) {
tdNode.className = tdNode.className + "over";
} else {
var overPos = tdNode.className.indexOf("over");
tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
}
}
}
}
</script>
Le code html :
<table width="515" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td><p>test</p></td>
<td> </td>
<td> </td>
</tr>
</table>
mais ça marche pas me manque un truc ... et je trouve po ...
help ??? 
Publié : 10 juil. 2004, 13:03
par Fr.eddoZ
En relisant peut etre que vous voyez pas de quel tableau je veux parler c'est celui des recap de ce forum :
http://www.geckozone.org/forum/viewforum.php?f=8
Voila ... le webmaster du site n'est pas dans le coin ?
Allez bon we a tous
Fred
Publié : 10 juil. 2004, 13:03
par jv2759
la class c'est un style, donc cherche les balise style. Et eventuelement les fichier css...
Publié : 10 juil. 2004, 13:40
par Invité
Salut jv 2759 je suis de nimes ....
ouai j'ai regarder la feuile de style mais je comprend pas le javascript donc ... ça coince !!
personne n'utilise ce genre de script pour faire un roll over sur un <tr> ? snif
Publié : 10 juil. 2004, 14:13
par jv2759
tu peux à mon avie récupérer le javascripte comme il est sans y toucher.
Je tes isoler parti des css utiliser. tu ajoute simplement cela dans ta pages.
Le principe c'est qu'au demarage il utilise le style row1 tout court qui affiche un fond en eff3f9, et une fois que tu tu passe dessu il change le style en row1over avec comme couleur e0e8f2...
Code : Tout sélectionner
<style>
.row1, .row1Poster {
background: #eff3f9;
border-top: 1px solid #eff3f9;
border-bottom: 1px solid #eff3f9;
}
.row2, .row2Poster, .helpline {
background: #e0e8f2;
border-top: 1px solid #e0e8f2;
border-bottom: 1px solid #e0e8f2;
}
.row1Poster, .row2Poster {
border-right: 1px solid #2e62aa;
}
.row3 {
background: #cedcec;
border-top: 1px solid #cedcec;
border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
background-color: #e0e8f2;
border-top: 1px solid #2e62aa;
border-bottom: 1px solid #2e62aa;
}</style>
non ça veut pas
Publié : 10 juil. 2004, 14:36
par Fr.eddoZ
Voila le code de ma page de test ... mon editeur voit une erreur au niveau du mousseover ... il doit y avoir un chemin dans le javascript que je vois pas !
quand ça veut pas ...
Merci en tout cas pour ton coup de main
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
var tdNodes = row.childNodes;
for (var i=0; i<tdNodes.length; i++) {
var tdNode = tdNodes[i];
if (tdNode.nodeType != 3) { // type 3 => #text
if (onFlag) {
tdNode.className = tdNode.className + "over";
} else {
var overPos = tdNode.className.indexOf("over");
tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
}
}
}
}
</script>
<style>
.row1, .row1Poster {
background: #eff3f9;
border-top: 1px solid #eff3f9;
border-bottom: 1px solid #eff3f9;
}
.row2, .row2Poster, .helpline {
background: #e0e8f2;
border-top: 1px solid #e0e8f2;
border-bottom: 1px solid #e0e8f2;
}
.row1Poster, .row2Poster {
border-right: 1px solid #2e62aa;
}
.row3 {
background: #cedcec;
border-top: 1px solid #cedcec;
border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
background-color: #e0e8f2;
border-top: 1px solid #2e62aa;
border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table width="515" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td><p>test</p></td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Publié : 10 juil. 2004, 14:54
par jv2759
tien j'ai un peux modifier ton scripte.
En fait tu avait oublier de mettre les class en celulle :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
var tdNodes = row.childNodes;
for (var i=0; i<tdNodes.length; i++) {
var tdNode = tdNodes[i];
if (tdNode.nodeType != 3) {
if (onFlag) {
tdNode.className = tdNode.className + "over";
} else {
var overPos = tdNode.className.indexOf("over");
tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
}
}
}
}
</script>
<style>
.tableaux {
background: #eff3f9;
border: 1px solid #2e62aa;
}
.row1 {
background: #eff3f9;
border-top: 1px solid #eff3f9;
border-bottom: 1px solid #eff3f9;
}
.row2 {
background: #e0e8f2;
border-top: 1px solid #e0e8f2;
border-bottom: 1px solid #e0e8f2;
}
.row3 {
background: #cedcec;
border-top: 1px solid #cedcec;
border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
background-color: #e0e8f2;
border-top: 1px solid #2e62aa;
border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table class="tableaux" width="515" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td class="row1"><p>test1</p></td>
<td class="row2"> </td>
<td class="row3"> </td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td class="row1"><p>test2</p></td>
<td class="row2"> </td>
<td class="row3"> </td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td class="row1"><p>test3</p></td>
<td class="row2"> </td>
<td class="row3"> </td>
</tr>
</table>
</body>
</html>
Tu peux utiliser cela en base et faire les modif que tu veux...
excellent !!
Publié : 10 juil. 2004, 17:26
par Fr.eddoZ
ouai maintenant comme ça cela parait evident !!!!
Merci beaucoup vraiment c'est super cool !! je vais en abuser !!!!
bonne continuation
@+ Fred
Publié : 10 juil. 2004, 17:32
par jv2759
Mais c'est évident, c'est toujours évident;)
Abuse tout de même pas trop car si à chaque fois que l'on vas sur ton site cela clignote dans tout les sence quand on passe la sourie;)
Publié : 10 juil. 2004, 17:53
par Dragon Company
Salut,
Quelqu'uns peut il me dire les fichiers phpbb à modifier ? le code sur une page ca va mais là ... avec phpbb me paume dans les fichier tpl ...
@+++