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