Rappel.
Pour commencer un petit rappel d'HTML
Voici les attributs, selon la scpécification du W3 Consortium , pour le tag <TD> (ou <TH>) :
id, class (Identifiant dans le document)
lang (Information sur le language supporté), dir (Direction du texte)
title (élement titre)
style (Information de style dans le tag)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (évènements)
bgcolor (Couleur d'arriere plan)
align, char, charoff, valign (Alignement à l'interieur des cellules)
Cela n'est biensûr qu'une partie de la spécification des tableaux HTML; Pour plus d'informations sur ces derniers consultez la spécification complète correspondante sur le site du World Wide Web Consortium.
Nous aurrons besoins d'utiliser plusieurs éléments de la précédente liste dans notre fonction Javascript.
Notament l'attribut id, et les évenments onmouseover() et onmouseout().
La fonction.
Voici la paire de fonctions Javascript apellées dans les évènements intrinsèques du tag <A> :
//--ColorChanger v1.2 Copyright © 2000 Nicolas Crovatti
// -- Start --
// déclaration des variables
var docObj = (document.all) ? "document.all." : "document.";
var OldColor
var OldBorderColor
//On appelle ceci dans l'évènement OnMouseOver()
function chgColor(rowNum,Color) {
thisRow = eval(docObj + rowNum)
OldColor = thisRow.bgColor
OldBorderColor = thisRow.borderColor
thisRow.bgColor = "#" + Color
thisRow.borderColor = "#000000"
}
// On appelle ceci dans l'évènement OnMouseOut()
// pour rétablir les couleurs d'origine.
function RetColor(rowNum) {
thisRow = eval(docObj + rowNum)
thisRow.bgColor = OldColor
thisRow.borderColor = OldBorderColor
}
// -- End --
//Exemple d'appel de la fonction :
//
//<td colspan="5" id="400">
// <a
// OnMouseOver="chgColor(400,'009900')"
// OnMouseOut="RetColor(400)"
// href="#">Un lien
// </a>
//</td>
//
Explications.
Qu'avons-nous ici ?
Nous commencons par la déclaration des variables :
var docObj = (document.all) ? "document.all." : "document.";
var OldColor
var OldBorderColor
Pour l'exemple nous aurons :
.docObj : contenant tous les éléments du document.
.OldColor : contenant la couleur d'origine de la cellule
.OldBorderColor : contenant la couleur d'origine
La première fonction :
function chgColor(rowNum,Color) {
thisRow = eval(docObj + rowNum)
OldColor = thisRow.bgColor
OldBorderColor = thisRow.borderColor
thisRow.bgColor = "#" + Color
thisRow.borderColor = "#000000"
}
Cette fonction a deux paramètres, rowNum et Color qui sont récupérés ici en rouge :
//Exemple d'appel de la fonction :
//
//<td colspan="5" id="400">
// <a
// OnMouseOver="chgColor(400,'009900')"
// OnMouseOut="RetColor(400)"
// href="#">Un lien
// </a>
//</td>
//
Le premier, 'rowNum' représente ici l'identifiant de la cellule a modifier et le second, 'Color' sera la couleur au format que vous voulez.
format acceptés dans le paramètre 'Color':
En Toutes lettres (16 safe colors) :
Black
White
Red
Green
...la suite
En hexadécimal (216 WebSafe color) :
000000 = Black
FFFFFF = White
FF0000 = Red
008000 = Green
...la suite
La fonction identifie l'object en cours (Une <td> qui a pour attribut "ID" : rOwNum)
...
thisRow = eval(docObj + rowNum)
...
Puis elle récupere les couleurs de l'object cellule et les assignent à leurs variables respectives :
...
OldColor = thisRow.bgColor
OldBorderColor = thisRow.borderColor
...
Au final elle applique les nouvelles valeurs de propriétes ("Color") à la cellule en cours et la valeur "noir" ("#00000") à la bordure de cette même cellule:
...
thisRow.bgColor = "#" + Color
thisRow.borderColor = "#000000"
...
Voila, rien de bien sorcier! Nous pouvons même imaginer passer une paramètre"BorColor" et l'assigner a la propriété .bordercolor :O)
Retour aux sources.
Si vous avez suivi jusqu'ici vous pouvez récapituler avec moi :
La souris passe sur un lien ->
la fonction JScript récupère l'"ID" de la cellule
les couleurs d'origine sont enregistrées dans des variables.
la couleur de la cellule ainsi que ca bordure change.
Que nous reste t-il a faire ?
Eh bien restaurer les anciennes propriétés de la cellule.
Restauration
Voici la fonction de restauration des couleurs :
function RetColor(rowNum) {
thisRow = eval(docObj + rowNum)
thisRow.bgColor = OldColor
thisRow.borderColor = OldBorderColor
}
Simple, non ? elle applique juste les couleurs d'origine de la cellule en cours!
Dans la suite nous verrons comment optimiser et automatiser cette fonction en utilisation de l'ASP.
Optimisation.
Pour optimiser et automatiser la fonction nous pouvons utiliser un bout de code ASP / PHP / CGI ou autre pour générer le code des cellules et des liens.
Prenons par exemple un site qui dispose d'un grand nombre de liens dans une base de donnée.
En ASP on pourra exécuter un code de la sorte :
<html>
<head>
<title>Un exemple</title>
<script language="javascript">
var docObj = (document.all) ? "document.all." : "document.";
var OldColor;
var OldBorderColor;
function chgColor(rowNum,Color) {
thisRow = eval(docObj + "Class_" + rowNum)
OldColor = thisRow.bgColor;
OldBorderColor = thisRow.borderColor;
thisRow.bgColor = "#" + Color;
thisRow.borderColor = "#000000";
}
function RetColor(rowNum) {
thisRow = eval(docObj + "Class_" + rowNum);
thisRow.bgColor = OldColor;
thisRow.borderColor = OldBorderColor;
}
</script>
</head>
<body>
<%Dim URL, DESCRIPTIONresponse.write("<table border=1 bordercolor=#FFFFFF>")&vbcrlf
i = 0
Do While Not i=10
DESCRIPTION = (i+1000)*1000
response.write("<tr>")&vbcrlf
response.write("<td id=""Class_"&i&""">")
response.write("<a "&_
"onMouseOver=""chgColor('"&i&"','E7E7E7')""" &_
"onMouseOut=""RetColor('"&i&"')""" &_
"href="&URL&">"&DESCRIPTION&"</a>")
response.write("</tr>")&vbcrlf
response.write("</td>") &vbcrlf
i=i+1
Loop
response.write("</table>")&vbcrlf
%>
</body>
</html>
