Bonjour,
Je trouve ce tuto (http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177#commentForm) top, mais j'ai un bug:
J'ai réalisé l'image :
Ensuite j'ai fait les area avec l'outil "MccHTMLMapper"
Puis je commence a écrire le html, css, jquery en suivant le tuto à la lettre,
voici mon html:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Démonstration de carte interactive</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="map">
<img src="void.png" width="537" height="609"/>
</div>
</body>
Mon css est le suivant:
.map{
width:537px;
height:609px;
background:url(sprites_carte_regions.png) left top no-repeat;
}
Voila je devrais avoir la carte d'affiché à l'écran et je n'ai rien
Enfin l'image map.png (renomé sprites_carte_regions.png) et cachée par void.png mais il n'est pas indiqué qu'il faille mettre des index à ce moment, de plus sur le tuto ca fonctionne :/
J'aurais besoin de vos lumières car j'aimerais vraiment finir ce tuto tres utile
Merci d'avance à tous =)
Ba avec un display: block et un z-index c'est bon, après tu dis que c'est pas dans le tuto, mais le tuto est pas tout récent, et tout dépend de ton navigateur
Salut Nairolf,
Merci de ta reponse, mais je n'y arrive pas j'ai mis un z-index:
.map{
width:537px;
height:609px;
background:url(sprites_carte_regions.png) left top no-repeat;
position:absolute;
display:block;
z-index:2;
}
et
.map img{
position:absolute;
top:0;
left:0;
z-index:1;
}
et rien ne se passe :/
Commment faire ?
Un link ?