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.

background de div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager