Bonjours voila j'ai terminer mon design sur photoshop et j'ai dont réaliser un menu déroulant... j'ai chercher comment le réaliser et j'ai trouver le tuto des images mappées... j'ai réussi a mapper mes images avec mapthis, j'ai mes maps... mais la je seche pour réaliser le menu déroulant x_x

Voici ma page html :
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
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   <head>
       <title>One week in the United Kingdom</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
	  <div id="header">
	     <!-- header dans CSS -->
      </div>
	  <div id="menu">
	     <img src="images/menu.jpg" usemap="#menu" alt="image"/>
		 <img src="images/monday_menu.png" usemap="#monday_menu" alt="image"/>
		 <img src="images/tuesday_menu.png" usemap="#tuesday_menu" alt="image"/>
		 <img src="images/wednesday_menu.png" usemap="#wednesday_menu" alt="image"/>
		 <img src="images/thursday_menu.png" usemap="#thursday_menu" alt="image"/>
		 <img src="images/friday_menu.png" usemap="#friday_menu" alt="image"/>
	  </div>
	  <div id="corps">
	  </div>
      <div id="footer">
      </div>
      <div id="map">
	     <map name="menu" class"map">
            <area shape="rect" coords="0,283,168,313" href="#"/>
	        <area shape="rect" coords="0,253,168,283" href="#"/>
            <area shape="rect" coords="0,204,168,233" href="#"/>
            <area shape="rect" coords="0,175,168,204" href="#"/>
            <area shape="rect" coords="0,145,168,175" href="#"/>
            <area shape="rect" coords="0,116,168,145" href="#"/>
            <area shape="rect" coords="0,89,168,116" href="#"/>
            <area shape="rect" coords="0,60,167,89" href="#"/>
         </map>
         <map name="monday_menu" class="map">
            <area shape="rect" coords="4,0,273,25" href="#"/>
            <area shape="rect" coords="4,25,273,56" href="#"/>
            <area shape="rect" coords="4,56,273,85" href="#"/>
	        <area shape="rect" coords="4,85,274,114" href="#"/>
            <area shape="rect" coords="4,114,273,143" href="#"/>
            <area shape="rect" coords="4,143,274,172" href="#"/>
            <area shape="rect" coords="4,172,273,200" href="#"/>
            <area shape="rect" coords="3,200,274,229" href="#"/>
            <area shape="rect" coords="3,229,272,255" href="#"/>
            <area shape="rect" coords="4,255,272,285" href="#"/>
         </map>
         <map name="tuesday_menu" class="map">
            <area shape="rect" coords="6,1,133,29" href="#"/>
            <area shape="rect" coords="6,29,134,58"  href="#"/>
         </map>
         <map name="wednesday_menu" class="map">
            <area shape="rect" coords="6,2,219,31" href="#"/>
            <area shape="rect" coords="6,31,218,61" href="#"/>
            <area shape="rect" coords="6,61,218,90" href="#"/>
            <area shape="rect" coords="6,90,218,115" href="#"/>
		 </map>
		 <map name="thursday_menu" class="map">
            <area shape="rect" coords="11,4,124,31" href="#"/>
            <area shape="rect" coords="10,31,124,60"  href="#"/>
         </map>
		 <map name="friday_menu" class="map">
            <area shape="rect" coords="6,3,275,31" href="#"/>
            <area shape="rect" coords="6,31,276,59" href="#"/>
            <area shape="rect" coords="5,59,275,89" href="#"/>
            <area shape="rect" coords="4,89,275,117" href="#"/>
		 </map>
      </div>
   </body>

Toute les maps se trouve dans la balise <div id="map">, les map x_menu sont les menu qui doivent s'afficher quand le curseur est sur x dans le menu.png

cad : si le curseur est sur monday sur l'image menu.png monday_menu.png doit s'ouvir... ainsi de suite !

voici mon CSS :
Code css : 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
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/background.jpg");
   /*ajouts*/
   background-color: black;
   background-position: center;
   background-repeat: repeat-y;
   /*--*/
}
 
#header
{
   width: 908px;
   height: 216px;
   background-image: url("images/header.png");
   background-repeat: no-repeat;  
}
 
/* Menu déroulant */


Un deuxième petit problème... mon arrière plan est bien centrer et tout mais mon header et les autre image sont décaller si je veux les center avec le background... x_x du coup avec le margin auto sa créer un décalage si la fenetre change de taille.

voici les images qui vont avec :
http://filebeam.com/e699b3f36a3ff5dc38711b2951e50c07


Merci d'avance de votre aide