Forum SELFHTML Archives du forum 2003 juin| Forum SELFHTML Archives du forum 2003 juin |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: Enslow855, 
enslow855@aol.fr, 11. 06. 2003, 13:58
http://www.photosnum.fr.st
Pour éviter d'avoir à utiliser des images comme éléments de navigation je souhaiterai utiliser la fonction bgColor des cellules de tableau. Cependant pour ne pas avoir à multiplier mon code je trouve utile de créer une fonction qui produise cet effet. Cependant la ou mon code passe lorsqu'il est placé directement dans le onMouseOver de ma cellule, il ne fonctionne pas lorsqu'il est placé dans une fonction.
Voici les deux codes en question:
<td onMouseOver="bgColor='yellow';">
function changeCoul(n){
bgColor='yellow';
}
D'autre part serait-il possible d'appliquer ce code directement dans la feuille de style?
 |
Le message suivant est de: Patrick Andrieu, nospam@nospam.fr, 12. 06. 2003, 01:52
http://www.selfhtml.com.fr/equipe/patrick.htm
Salut!
»» Voici les deux codes en question:
»» <td onMouseOver="bgColor='yellow';">
Cela ne fonctionne que tant tu n'as pas déclaré de background-color dans une feuille de style...
»» function changeCoul(n){
»» bgColor='yellow';
»» }
Dans une fonction, cela ne marchera pas. La fonction doit savoir à quel élément s'applique l'indication. Plus haut, tu appliques ton code JavaScript "inline", c'est à dire directement dans la balise concernée. Mais, comme indiqué, dès que tu as indiqué une mention pour background-color dans une feuille de style, le truc ne marche plus.
»» D'autre part serait-il possible d'appliquer ce code directement dans la feuille de style?
JavaScript et CSS ne sont pas la même chose. Tu ne peux pas mettre du code JavaScript dans une feuille de style. En revanche, tu peux changer dynamiquement des mentions de feuilles de style par l'intermédiaire de JavaScript, c'est ce que tu verras dans l'exemple ci-dessous... Et bienvenue dans le DOM (http://selfhtml.selfhtml.com.fr/javascript/index.htm)!
L'exemple qui suit te montreras plusieurs méthodes de changer la couleur de cellules. A toi de choisir celle qui te parviendra au mieux!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>:hover für Zellen</title>
<script type="text/javascript">
<!--
function changeColour1(name) {
document.getElementById(name).style.backgroundColor='yellow';
}
function changeColour2(name) {
document.getElementById(name).style.backgroundColor='#eeeeee';
}
//-->
</script>
<style type="text/css">
td {
border: solid;
padding: 20px;
background-color:#eeeeee;
}
td a {
display: block;
padding: 20px;
}
a:hover {
color: black;
background-color: yellow;
}
</style>
<table>
<tr>
<td><a href="http://example.com">Cell 1/1: hover</a></td>
<td><a href="http://example.com">Cell 1/2: hover</a></td>
<td onMouseOver="bgColor='yellow';" onMouseOut="bgColor='#eeeeeer'">Cell
1/3:<br>bgColor</td>
<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='#eeeeee'">Cell
1/4:<br>this.bgColor</td>
<td id="bla0" onMouseOver="changeColour1('bla0');" onMouseOut="changeColour2('bla0')">Cell
1/5: DOM</td>
</tr>
<tr>
<td id="bla1" onMouseOver="changeColour1('bla1');" onMouseOut="changeColour2('bla1')">Cell
2/1: DOM</td>
<td id="bla2" onMouseOver="changeColour1('bla2');" onMouseOut="changeColour2('bla2')">Cell
2/2: DOM</td>
<td id="bla3" onMouseOver="changeColour1('bla3');" onMouseOut="changeColour2('bla3')">Cell
2/3: DOM</td>
<td id="bla4" onMouseOver="changeColour1('bla4');" onMouseOut="changeColour2('bla4')">Cell
2/4: DOM</td>
<td id="bla1" onMouseOver="changeColour1('bla1');" onMouseOut="changeColour2('bla1')">Cell
2/5: DOM</td>
</tr>
</table>
Vois ce qui passe avec la cellule 2/5 :)
Amuse-toi bien,
Patrick
| |
Le message suivant est de: Enslow855, enslow855@aol.fr, 13. 06. 2003, 13:25
http://www.photosnum.fr.st
Pardon pour l'absence de réponse mais je suis novice en terme de forum et je ne savais pas trop quoi faire.
Réponse très fournie. Je me suis servie de la méthode 2/1 qui était totalement adaptée à mes attentes.
|
| Forum SELFHTML Archives du forum 2003 juin |
© 1998-2004 selfhtml@fr.selfhtml.org
(JAVASCRIPT)