Modifier l'image background d'une cellule

Signaler
Messages postés
36
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
23 juin 2008
-
Messages postés
7
Date d'inscription
lundi 3 mai 2004
Statut
Membre
Dernière intervention
12 juin 2009
-
Hello, je crée un menu dynamique et j'aimerai que l'image en background de ma cellule change lorsque le souris passe dessus. Donc j'ai créé une fonction javascript onMouseOver() qui est sensé modifier l'url de l'image en question. J'ai essayé plusieurs moyens en me réferrant à cette page : http://www.w3schools.com/htmldom/dom_obj_style.asp#background . Le problème c'est que je voudrais que ça fonctionne avec IE et FF.

Ne fonctionne pas :
document.getElementById("td_id").style.backgroundImage = url("over.gif");

Apparement, je suis obligé d'utiliser la propriété Style car les propriétés du TD ne fonctionnent pas avec FF. Quelqu'un aurait une solution?

Merci

3 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
bonjour,
et comment c'est fait ?
car par exemple (en local) :

 ----

     exemple
  ,
 






ça baigne...

Cordialement.      Bul.   Site
Messages postés
36
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
23 juin 2008

Yep! Merci, le problème est réglé... Dans l'exemple de mon premier message, il manquait les ' pour url.

Fonctionne correctement sur IE et FF:
document.getElementById("td_id").style.backgroundImage = 'url("over.gif")';
Messages postés
7
Date d'inscription
lundi 3 mai 2004
Statut
Membre
Dernière intervention
12 juin 2009

Cool merci pour l'aide.

Pour ceux et celle qui n'y arrive pas voici un code complet:

<!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=utf-8" />
<title>Labs - Ajax</title>
<!-- -->
<script language="javascript" type="text/javascript">
    //DHTML
   
    function dhp(id) {
        if(id == 1){
            document.getElementById(1).style.backgroundImage = 'url(paiement_position_1.jpg)';
            document.getElementById(2).style.backgroundImage = 'url(paiement_position_0.jpg)';
            document.getElementById(3).style.backgroundImage = 'url(paiement_position_0.jpg)';
        };//
       
        if(id == 2){
            document.getElementById(1).style.backgroundImage = 'url(paiement_position_0.jpg)';
            document.getElementById(2).style.backgroundImage = 'url(paiement_position_1.jpg)';
            document.getElementById(3).style.backgroundImage = 'url(paiement_position_0.jpg)';
        };//
       
        if(id == 3){
            document.getElementById(1).style.backgroundImage = 'url(paiement_position_0.jpg)';
            document.getElementById(2).style.backgroundImage = 'url(paiement_position_0.jpg)';
            document.getElementById(3).style.backgroundImage = 'url(paiement_position_1.jpg)';
        };//
               
    };//*/

</script>
<!-- //-->
</head>

<form id="form1" name="form1" method="post" action="">
      ----

      &nbsp;,
      Libelle1,
                <label>
                        
Bouton radio</label>,
   
    ----

      &nbsp;,
      Libelle2,
            <label>
         
      </label>
Bouton radio,
   
    ----

      &nbsp;,
      Libelle3,
            <label>
       
Bouton radio</label>,
   
 

</form>

</html>

Bien sur n'oublier pas de créer deux fichier images :

paiement_position_1.jpg et paiement_position_0.jpg