Superposition de différents éléments HTML

**b_e_n_n** · 15/04/2008, 18h58

Bonjour,
je suis en train de développer un site web pour une action professionnelle.
Je vous décris ce que j'ai fait : j'ai une image mappée(avec des liens) que j'ai enregistrée en tant qu'index.
Il se trouve que je souhaiterais utiliser cette image mappée en tant qu'image de fond pour toutes mes autres pages.
J'ai essayé de faire un "include("index.html") pour pouvoir integrer cette page à une autre page php mais le problème qui se pose est que les 2pages ne sont pas superposées comme je le souhaitais mais affichées a la suite !!
c'est un réel problème pouvez vous m'aider s'il vous plait je dois terminer ce projet pr demain :s :s :s
merci beaucoup d'avance

**hellspawn_ludo** · 15/04/2008, 19h24

Bonjour et bienvenue à toi sur le forum.

Pourrais-tu mettre du code ou donner le lien qui nous permettrait de visualiser ton problème ?

Merci.

**b_e_n_n** · 15/04/2008, 20h05

voici la page menu.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
 <html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
 
<body>
 
<p><map name="FPMap0">
<area href="index.html" shape="polygon" coords="376, 192, 373, 182, 541, 146, 546, 192">
<area href="nouveautes.php" shape="polygon" coords="550, 194, 543, 124, 703, 125, 706, 189">
<area href="ListeLivres.php" shape="polygon" coords="709, 193, 711, 127, 893, 143, 883, 192">
<area href="contact.php" shape="polygon" coords="893, 194, 911, 131, 1107, 187, 897, 192">
<area href="http://" shape="polygon" coords="1256, 771, 1238, 745, 1214, 724, 1177, 712, 1167, 722, 1175, 739, 1183, 745, 1198, 812, 1206, 820, 1221, 819, 1218, 828, 1219, 838, 1241, 844, 1269, 852, 1295, 858, 1314, 872, 1330, 872, 1330, 856, 1316, 830, 1299, 812, 1284, 792, 1270, 780, 1271, 769, 1269, 764">
</map>
<img border="0" src="images/livre..jpg" width="1360" height="1020" usemap="#FPMap0"></p>
 
</body>
 
</html>

et une des autres pages a laquelle je souhaiterais ajouter menu.html(l'image mappée) en image de fond : (c'est une liste de livres récupérée a partir d'une base de données)

Code php :

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
      <html>
  <body>
    <h2>Liste des Articles</h2>
 
<?
 
 
      include("Connexion.php");
      include("menu.html");
      // Exécution de la requête SQL
      $Requête="Select * from Livres" ;
      $Résultat=mysql_query($Requête);
      //Parcours séquentiel du résultat de la requête SQL
      $Ligne=mysql_fetch_array($Résultat);
      while ($Ligne)
        { echo "<a href='AfficheDetailLivre.php?rl=" .
          $Ligne["RefLivre"] . "'>" .
          $Ligne["NomLivre"] . "</a><br>" ;
          $Ligne=mysql_fetch_array($Résultat);
        }
 
 
 
    ?>
  </body>
</html>

**hellspawn_ludo** · 15/04/2008, 22h11

Merci pour le code.

Je te montre un exemple avec une simple balise P qui s'affiche au dessus de l'image mappée pour que tu ai une idée. Ainsi, les liens sur ton image sont toujours cliquables :

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
 
 
 <html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
 
<body>
 
<p><map name="FPMap0">
<area href="index.html" shape="polygon" coords="376, 192, 373, 182, 541, 146, 546, 192">
<area href="nouveautes.php" shape="polygon" coords="550, 194, 543, 124, 703, 125, 706, 189">
<area href="ListeLivres.php" shape="polygon" coords="709, 193, 711, 127, 893, 143, 883, 192">
<area href="contact.php" shape="polygon" coords="893, 194, 911, 131, 1107, 187, 897, 192">
<area href="http://" shape="polygon" coords="1256, 771, 1238, 745, 1214, 724, 1177, 712, 1167, 722, 1175, 739, 1183, 745, 1198, 812, 1206, 820, 1221, 819, 1218, 828, 1219, 838, 1241, 844, 1269, 852, 1295, 858, 1314, 872, 1330, 872, 1330, 856, 1316, 830, 1299, 812, 1284, 792, 1270, 780, 1271, 769, 1269, 764">
</map>
<img border="0" src="images/livre.jpg" width="1360" height="1020" usemap="#FPMap0"></p>
 
<p style=" position:absolute;left:100px;top:200px;background-color:green; color:red; ">Un texte au dessus de l'image mappée</p>
</body>
 
</html>

Dis-moi si ça t'aide.

Pour le résultat de ta requête, tu l'as mets dans une balise P et tu lui donne une position:absolute et tu joues avec le left, top... pour positionner le résultat dans ta page.

P.S. : Fais attention, tu as mis 2 points sur ton lien livre :

Code :

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

1
2
<img border="0" src="images/livre..jpg" width="1360" height="1020" usemap="#FPMap0">

**b_e_n_n** · 20/04/2008, 21h05

ca ne marche pas pour afficher la requete sur l'image parce que c'est l'image mappéee que je fais include a la page de requete

Superposition de différents éléments HTML

CSS

Discussions similaires

Partager

Partager