Bonjour !
Alors voilà, je me suis créé des boutons pour mon site, et j'essaye tant bien que mal de leur apporter un comportement dynamique. Je débute en javascript, mais j'ai quelques notions objet et procédurales. Dans un soucis de beauté de mon code et du respect des règles, j'essaye donc de gérer mes événements dans un script, et non-pas inline.
La page qui me pose soucis est une page de back-office, avec une grosse série de lignes.
Voici le html et le script associé.
Le soucis c'est tout simplement que ça ne fonctionne pas.
Quelques précisions :
- les liens relatifs "url(Images/btnModifier.png)" sont exacts.
Modifié par Shqdow (02 Mar 2011 - 19:40)
Alors voilà, je me suis créé des boutons pour mon site, et j'essaye tant bien que mal de leur apporter un comportement dynamique. Je débute en javascript, mais j'ai quelques notions objet et procédurales. Dans un soucis de beauté de mon code et du respect des règles, j'essaye donc de gérer mes événements dans un script, et non-pas inline.
La page qui me pose soucis est une page de back-office, avec une grosse série de lignes.
Voici le html et le script associé.
<?php foreach ([...]) {?>
<tr>
<td class="Details btnModifier">
<div class="btnModifierImg" name="btnModifierImg"> </div>
</td>
</tr>
<?php $cptConge++; } ?> div.btnModifierImg
{
width:30px;
height: 30px;
cursor:pointer;
background-image: url(../Images/btnModifier.png);
}
var btnModif = new Array();
btnModif = document.getElementsByName("btnModifierImg");
var btnDelete = new Array();
btnDelete = document.getElementsByName("btnSUpprimerImg");
changerBackground(obj, back)
{
obj.style.backgroundImage = back;
}
for(var i = 0; i < btnModif.length; i++)
{
var btnMod = btnModif.item(i);
var backOver = "url(Images/btnModifierHover.png)";
var backDown = "url(Images/btnModifierDown.png)";
var backNormal = "url(Images/btnModifier.png)";
btnMod.OnMouseOver = changerBackground(btnMod, backOver);
btnMod.OnMouseOut = changerBackground(btnMod, backNormal);
btnMod.OnMouseDown = changerBackground(btnMod, backDown);
btnMod.OnMouseUp = changerBackground(btnMod, backNormal);
}
for(var i = 0; i < btnDelete.length; i++)
{
var btnDel = btnDelete.item(i);
var backOver = "url(Images/btnSupprimerHover.png)";
var backDown = "url(Images/btnSupprimerDown.png)";
var backNormal = "url(Images/btnSupprimer.png)";
btnDel.OnMouseOver = changerBackground(btnMod, backOver);
btnDel.OnMouseOut = changerBackground(btnMod, backNormal);
btnDel.OnMouseDown = changerBackground(btnMod, backDown);
btnDel.OnMouseUp = changerBackground(btnMod, backNormal);
}
Le soucis c'est tout simplement que ça ne fonctionne pas.
Quelques précisions :
- les liens relatifs "url(Images/btnModifier.png)" sont exacts.
Modifié par Shqdow (02 Mar 2011 - 19:40)
