Bonjour,

Je suis nouveau sur site, et j'espère que je poste au bon endroit !
Voilà, je suis en train de créer mon site web professionnel.
Je ne suis pas très expérimenté dans ce domaine, mais je ne suis pas débutant non plus.

Voilà mon problème :

J'ai créé deux versions de l'index de mon site :
-> une qui s'affiche par une image, découpée en différentes zones cliquables,
-> l'autre sous forme d'un arrière plan extensible non répété.

Ma question : y a t'il un moyen de mettre une image en arrière plan et de lui attribuer une balise map ?


Autre possibilité :
J'ai essayé plein d'autres trucs avant d'en arriver là. Notamment une image d'arrière-plan avec des images superposées (par z-index) et chacune redirigeant vers une nouvelle page. Le problème c'est qu'en passant de la fenêtre au plein écran (ou inversement), les coordonnées des images sont modifiées, vu que le repère, c'est pas l'arrière plan, mais la page...

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
<body>
<map name="Bureau">
  <area shape="poly" coords="909,426,951,401,1010,471,969,496" href="#contact" title="Me contacter ?">
  <area shape="poly" COORDS="184,104,266,79,333,128,341,185,282,253,207,282,154,261,123,212" href="#work" title="Travaux réalisés">
  <area shape="poly" COORDS="44,321,89,296,230,361,273,440,234,430,158,456,17,390" href="#cv" title="Consulter mon CV">
  <area shape="poly" COORDS="407,562,413,259,798,257,836,556" href="book.html" title="Visiter mon book">
</map>
<img class="Style3" align="middle" src="images/Bureau1.jpg" width=1024 height=768 border=0 usemap="#Bureau">
</body>
D'où ma nouvelle question :
Comment peut on positionner des images sur un arrière-plan par rapport à cet arrière-plan ?

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style type="text/css">
body 
{
        background-repeat:no-repeat;
        background-position:top;
        background-size:cover;
}
</style>
 
<body>
<div align="center" style="position:inherit; z-index:1"><img src="images/Bureau.jpg" width="1024" height="768"/></div>
<div align="center" style="position:absolute; left:420px; top:100px; z-index:2"><img src="images/Casque.png" width="213" height="200"/></div>
</body>
Par contre les propriétés align et style ne semble pas vouloir fonctionner avec la balise <div>... J'ai essayé avec <span> aussi. J'ai obtenu encore autre chose.

Merci d'avance à qui pourra m'éclairer



Edit : bon j'ai eu la confirmation que l'on ne peut pas relier une balise map à un arrière-plan. Je passe donc à la solution de secours : une image simple zonée.

J'aurais sûrement besoin d'aide par la suite, aussi je reposterai prochainement