begin process at 2012 05 29 10:34:01
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

Débutants

 > 

Modifier l'image background d'une cellule

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Modifier l'image background d'une cellule

vendredi 28 avril 2006 à 14:35:52 | Modifier l'image background d'une cellule

darb66
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
vendredi 28 avril 2006 à 15:19:59 | Re : Modifier l'image background d'une cellule

bultez

Membre Club
bonjour,
et comment c'est fait ?
car par exemple (en local) :

<table border=4>
 <tr>
  <td onmouseover="this.style.backgroundImage='url(\'file://D:/Documents and Settings/Bul/Mes documents/Mes Images/Animes/coeur.gif\')';">
   exemple
  </td>
 </tr>
</table>
ça baigne...

Cordialement.      Bul.   site.gifSite
vendredi 28 avril 2006 à 15:33:21 | Re : Modifier l'image background d'une cellule

darb66
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")';
vendredi 29 mai 2009 à 17:36:33 | Re : Modifier l'image background d'une cellule

sniperdc
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>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td id="1" style="background-image:url(paiement_position_1.jpg);" width="20px" height="75px">&nbsp;</td>
      <td> Libelle1</td>
      <td>
          <label>
              <input name="Groupe de boutons radio1" type="radio" id="Groupe de boutons radio1_0" value="bouton radio" checked="checked" onclick="dhp('1')"/>          
Bouton radio</label></td>
    </tr>
    <tr>
      <td id="2" style="background-image:url(paiement_position_0.jpg);" width="20px" height="75px">&nbsp;</td>
      <td>Libelle2</td>
      <td>
      <label>
          <input type="radio" name="Groupe de boutons radio1" value="bouton radio" id="Groupe de boutons radio1_1" onclick="dhp('2')"/>
      </label>
Bouton radio</td>
    </tr>
    <tr>
      <td id="3" style="background-image:url(paiement_position_0.jpg);" width="20px" height="75px">&nbsp;</td>
      <td>Libelle3</td>
      <td>
      <label>
        <input type="radio" name="Groupe de boutons radio1" value="bouton radio" id="Groupe de boutons radio1_2" onclick="dhp('3')"/>
Bouton radio</label></td>
    </tr>
  </table>
</form>

</body>
</html>

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

paiement_position_1.jpg et paiement_position_0.jpg


Cette discussion est classée dans : style, image, modifier, cellule, background

Répondre à ce message

Sujets en rapport avec ce message

image background et redimensionnement [ par evilfrog83 ] Comment puis-je faire pour qu'une image positionnée en temps que fond d'un tableau puisse s'agrandir et se rétrécir en fonction de la taille de celui- changer background image onmouseover [ par fcdconnect ] bonjour comment changer le background image d'une td onmouseoveraparrament le onMouseOver='this.style.background ne fonctionne pas merci d'avance Formulaire - Modifier le bouton d'un submit par une image [ par poypoy00 ] Bonjour,je souhaiterais modifier un bouton de formulaire de type submit par une image tout en laissant ce dernier en submit. J'ai déjà essayé avec le Peut on modifier une cellule d'un tableau ??? [ par webgagner ] Est-il possible de modifier le contenu d'une celulle d'un tableau apres clic sur un bouton de la celule voisine??? appliquer plusieurs styles CSS sur une cellule d'un tableau [ par zizou100679 ] sur une balise TD je voudrais appliquer plusieurs styles provenant d'une feuille de style. on va appeler cssGras un style qui met la police en gras, c background-image / server / jsp [ par the_smurf ] Bonjour,Environnement:Je utilise un server Tomcat et la technologie Struts.La visualisation se fait dans IE.Problème:Je crée une jsp avec un tableau. changer l image de fond d une cellule d un tableau dans une frame [ par Poulipe ] Bonjour,je suis incapable de trouver comment changer l image de fond d une cellule dans ma frame du haut....j ai essayer plusieurs trucs style :parent Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur Image-blinkeur... [ par Grand Mamamouchi ] Bonjour !je voudrais ecrire un image-blinkeur.Voici le chantier :<script ty


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,374 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)