background de div

**Samyhijodelaluna** · 21/02/2007, 10h31

Tout d'abord bonjour à tous, j'espère que vous allez bien!

J'ai un souci pour réaliser ce que je désire. J'ai posté dans javascript mais une solution CSS est aussi la bienvenue!

Je m'explique :

Je réalise un site en php décomposé en plusieurs div. Pour la partie graphique j'ai un menu a gauche (qui est une image sur lequel sont écrit les menus en background de ma div) et je dois réaliser des liens à partir des parties de l'image correspondantes.
Je ne sais pas si je suis clair dans l'explication.

Mon problème n'est pas d'isoler les parties de l'image, ni même de réaliser le lien, mais de faire que le background du menu change selons le lien sur lequel je suis.

Avec mon css j'arrive à la faire ( :hover) mais ca ne modifie que le background de la zone du lien.

Pour résumé j'ai une image en background d'un div, et j'aimerai qu'elle change en fonction de lien cotenu dans la div que je pointe.

J'ai essayé en javascript ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
echo "<script type=\"text/javascript\"><!--";
echo "function modif_BG(num_img) ";
echo "  {";
echo "  if (document.getElementById)";
echo "    {";
echo "    document.getElementById(\"menu_gauche\").style.backgroundImage = url(../images_accueil/SITE_DABOVILLE_DEF_01.jpg);";
echo "    }";
echo "  else if (document.all)"; 
echo "    {";
echo "    document.all[\"menu_gauche\"].style.backgroundImage = \"\";";
echo "    }";
echo "  }";
echo "--></script>";

(num_img est inutil pour l'instant)

que j'appelle comme suit dans ma div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
echo "<div id=\"menu_gauche\">\r"; //menu gauche
echo "<a class=\"zone_accueil\" href=\"home.php\"
         onMouseOver=\"modif_BG()\" onMouseOut=\"modif_BG()\"></a>";

Mais ca ne fonctionne pas. Je ne m'y connais pas trop, je ne demande pas la réponse mais juste quelquun qui pourait m'expliquer mon (mes) erreur(s)...

Merci par avance!

**Samyhijodelaluna** · 21/02/2007, 10h40

Selon IE, l'erreur serait :

Ligne 21 (ligne du href onMouseOver...)
Caractère : 1
Erreur : Objet Attendu
Code : 0

Une idée?

**jibouze** · 21/02/2007, 10h42

Salut,
tu dis que num_img est inutile mais justement, c'est censé etre un paramètre de ta fonction, donc il faut mettre quelque chose dans l'appel (dans le onmouseover/out).
Sinon, tu peux déjà faire un clic droit affficher la source pour qu'on ne voie que le javascript généré, et pas le php qui le génère ? Ca sera plus clair..

**Samyhijodelaluna** · 21/02/2007, 10h53

J'aio essayé les paramètre à passer mais rien ne marche Je suis d'aileur repassé à du void.
Je n'ai aps saisie ce que tu ma dit toute à l'heure, docn je t'envoie le copier coller comme demandé!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Le Château LA TOUANNE</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://www.admiself.com/administration/library/home.js"></script>
<style type="text/css">
</style>
<link rel="stylesheet" href="interface/stylecontenu.css" type="text/css" />
</head>
<body>
<script type="text/javascript"><!--
function modif_BG(void) 
  {
  if (document.getElementById)
    {
    document.getElementById("menu_gauche").style.backgroundImage = url(../images_accueil/SITE_DABOVILLE_DEF_01.jpg);    }
  else if (document.all)    {
    document.all["menu_gauche"].style.backgroundImage = "";
    }
  }
--></script>
<div id="site">
<div id="bandeau_haut">
<div class=\langue">
<a href="home.php?">Francais</a>
      <a href=jlklkjlk>Anglais</a>  
      <a href=jlklkjlk>Mandarin</a></div>
</div>
<div id="banniere_haut">
<div class="contact">
<span>XXXXXX</span>
</div>
</div>
<div id="centre">
<div id="menu_gauche">
<a class="zone_accueil" href="home.php" onMouseOver="modif_BG()" onMouseOut="modif_BG()"></a>
<a class="zone_cadre" href="2"></a>
<a class="zone_interieur" href="3"></a>
<a class="zone_activite" href="4"></a>
<a class="zone_reservation" href="5"></a>
</div>
<div id="conteneur">
<div id="conteneur_gauche">
</div>
<div id="conteneur_droit">
<div id="conteneur_droit_haut"></div>
<div id="conteneur_droit_bas">
<div class="conteneur_droit_contenu">
<span>Bienvenue au Château La TouanneBienvenue au Château La TouanneBienvenue au Château La TouanneBienvenue au Château La Touanne</span>
</div>
</div>
</div>
</div>
</div>
<div id="bas">
<div class="bas_contenu">
<span>Bienvenue au Château La Touanne</span>
</div>
</div>
</div>
</body>
</html>

Voila pour la source de la page générée. Alors c'est grave docteur???

**Samyhijodelaluna** · 21/02/2007, 10h59

bon j'ai trouvé tout seul, j'était resté dans le java/C++ j'avais mit un "void" pour ma fonction.

Donc j'ia modifier la fonction en function modif_BG() et la ca à l'air de tourner. Par contre j'ai des problèmes de mise en page mais bon ca je vais chercher!

Merci à toi pour ton aide, je reviendrais si j'ai un nouveau soucis!!!

MERCI BEAUCOUP

**jibouze** · 21/02/2007, 11h10

Il y a une erreur ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class=\langue">

Mais ça ne vient pas de ça.
Le problème vient de l'affectation de backgroundImage. Tu dois faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("menu_gauche").style.backgroundImage = 'url(Monchemin/MonImage)';

Attention aux quotes (ou double-quotes) !

**Samyhijodelaluna** · 21/02/2007, 11h23

Merci j'avais remarqué l'erruer 1, mais les quote j'avais pas fait gaffe! cependant toujours le problème de mise en page :

Quand je pase sur mon élément, le background disparait (au lieu de charger l'autre background), et quand je quitte la zone le background ne revient pas (avec simple ou double quote). Voila le code que j'utilise actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
 
function modif_BG_accueil() // pour modifier le BG quand on passe sur acceuil
  {
  if (document.getElementById)
    {
    document.getElementById("menu_gauche").style.backgroundImage='url(../images_contenu/SITE_DABOVILLE_DEF_10.jpg)';    }
  else if (document.all)    {
    document.all["menu_gauche"].style.backgroundImage = 'url(../images_contenu/SITE_DABOVILLE_DEF_10.jpg)';
    }
  }
 
 
function modif_BG_null() // pour remattre le background par défaut
  {
  if (document.getElementById)
    {
    document.getElementById("menu_gauche").style.backgroundImage = 'url(../images_contenu/SITE_DABOVILLE_DEF_03.jpg)';    }
  else if (document.all)    {
    document.all["menu_gauche"].style.backgroundImage = 'url(../images_contenu/SITE_DABOVILLE_DEF_03.jpg)';
    }
  }
 
//le code du lien
<a class="zone_accueil" href="home.php" onMouseOver="modif_BG_accueil()" onMouseOut="modif_BG_null()"></a>

A mon avis c'est un problème pour aller vers le liens car les différentes images ont bien la même taille. Mais bon je m trompe peut être! Tu vois ou est le problème ?

**jibouze** · 21/02/2007, 11h32

Comment est-ce que tu charges le background initialement (au lancement de la page) ?
Je pense que c'est un problème de chemin d'accès à l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

../images_contenu/SITE_DABOVILLE_DEF_10.jpg

Signifie que tu remontes d'un cran dans l'arborescence, puis que tu plonges dans le répertoire images_contenu...

A partir du moment où l'image disparait au survol, cela veut dire que ta fonction s'exécute bien. Je ne vois plus d'erreur javascript.

**Samyhijodelaluna** · 21/02/2007, 11h35

Ca me fait penser que c'est peut etre un conflit avec le css. Le chemin d'accés est bon pas de soucis, je remonte d'un cran puis je vais dans images_contenu, pas de soucis.

Cependant au démarage j'utilise le style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menu_gauche {float:left; width:250px; height:309px; background-image:url(../images_contenu/SITE_DABOVILLE_DEF_03.jpg)}

Il n'y a pas de problème pour la gestion des évènements onMouseOver et onMouseOut, donc le problème est bien du au images. Le conflit peut il venir de css/javascript?

**jibouze** · 21/02/2007, 12h25

Est-ce que ton fichier ne serait pas à la racine du serveur web par hasard ?
Parce que j'ai essayé plusieurs cas de figure, et il se trouve que si mon serveur contient un répertoire racine www, et que je mets un fichier directement à cet emplacement, alors un backgroundImage qui pointe vers ../qqch ne va pas marcher.
Tandis que si je mets mon fichier dans un répertoire www/test/ par exemple, et que j'ai un répertoire www/images, alors je pourrai faire url(../images/...) sans problème.

**Samyhijodelaluna** · 21/02/2007, 12h34

Non non pas de soucis, je suis dan un repertoire dabo, et j'ai mes images dans image_contenu et mes css dans interface. Tout les reste est disposé dans le repertoire dabo.

Quand je charge mes background par css il n'y a aucun souci, l'hestétique du site est parfaite en statique. Seulement les evènements ne font que disparaitre les background au lieu d'en cherger un nouveau...

Je ne vois pas j'ai pas mal cherché pourtant!!

**Samyhijodelaluna** · 21/02/2007, 12h50

En faite si je faisais bien une connerie! Je dois prendre les images dans un dossier enfant sans remonter d'un cran!

donc j'ai modifier par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
echo "function modif_BG_accueil() \r";
echo "  {\r";
echo "  if (document.getElementById)\r";
echo "    {\r";
echo "    document.getElementById(\"menu_gauche\").style.backgroundImage='url(image_contenu/SITE_DABOVILLE_DEF_10.jpg)';\r";
echo "    }\r";
echo "  else if (document.all)\r";
echo "    {\r";
echo "    document.all[\"menu_gauche\"].style.backgroundImage='url(images_contenu/SITE_DABOVILLE_DEF_10.jpg)';\r";
echo "    }\r";
echo "  }\r";

Et la comme par magie ca marche nickel... je suis un boulet, mais surtout tu m'as vraiement aidé je n'y aurais pas pens tout seul... ou peut être après 5heure de recherche mdr!!!

en tout cas un gros merci et une balise RESOLU dédicacée a Jibouze...
J'peux aller manger, merci a toi et à la prochaine!!!

background de div

JavaScript

Discussions similaires

Partager

Partager