Zones cliquables sur carte interactive !
lilsource
Messages postés
34
Date d'inscription
Statut
Membre
Dernière intervention
-
lilsource Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
lilsource Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
Bonjour à vous tous,
J'espère que j'aurai plus de chance ici car j'ai déjà posté sur un autre forum sans réponse.
J'ai suivi à la lettre un super Tuto fait par grafikart.fr qui permet de réaliser une carte (Map) à la façon du site leboncoin.
Cependant, en mouseover, je ne vois pas ma fameuse partie (région) avec son effet de relief.
J'espère que vous trouverez l'erreur.
Mon code java dans ma page PHP :
Puis à la suite, dans cette même page, mon code HTML :
Ma feuille de styles maintenant :
Alors, j'ai vérifié ces codes en long en large et en travers mais je ne vois rien qui cloche.
Après, je me dis que c'est peut-être une erreur provenant de mes fichiers image.
Il faut 2 images :
- "map.png" 19600x500 large comme la carte + (la carte x le nombre de régions) Ici 28x700px de large (énorme!)
- "void.png" image vide d'une taille libre (je l'ai mise à 800x600)
je vous joins "map.png" ci-dessous en visuel (attention c'est tout petit du coup).
J'espère que j'aurai plus de chance ici car j'ai déjà posté sur un autre forum sans réponse.
J'ai suivi à la lettre un super Tuto fait par grafikart.fr qui permet de réaliser une carte (Map) à la façon du site leboncoin.
Cependant, en mouseover, je ne vois pas ma fameuse partie (région) avec son effet de relief.
J'espère que vous trouverez l'erreur.
Mon code java dans ma page PHP :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Carte de france</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.map').append('<div class="overlay">').append('<div class="tooltip">salut les gens!!</div> );
$('.map .tooltip').hide();
var regions=[
{name:'Alsace', slug:'Alsace'},
//etc etc toutes les régions
];
// Tooltip qui suit la souris
$(document).mousemove(function(e){
$('.map .tooltip').css({
top:e.pageY-$('.map .tooltip').height()-20,
left:e.pageX-$('.map .tooltip').width()/2-10
});
});
// On mets les liens sur les aréas
$('.map area').each(function(){
var index = $(this).index();
$(this).attr ('href','http'+regions[index].slug);
});
// On passe sur une Région
$('.map area').mouseover(function(){
var index = $(this).index();
var left =-index * 700 - 700;
$('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.6);
$('.map .overlay').css({
backgroundPosition : left+ "px 0px"
});
});
//On sort de la map
$('.map').mouseout(function(){
$('.map .overlay').css({
backgroundPosition : "700px 0px"
});
$('.map .tooltip').stop().fadeTo(500,0);
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Puis à la suite, dans cette même page, mon code HTML :
<body>
<div class="map"><img src="void.png" alt="map" border="0" width="700" height="500" usemap="#Map" />
<map name="Map">
<area shape="poly" href="" alt="Alsace" coords="597,106,617,114,598,189,587,189,576,173,581,146,587,123,577,117,579,109,594,114,598,107" />
<area shape="poly" href="" alt="aquitaine" coords="297,292,327,310,362,286,386,314,364,366,329,377,327,390,325,428,265,399,298,291,297,294" /> <!-- etc etc... toutes les régions de France --><br>
</map>
</div>
</body>
</html>
Ma feuille de styles maintenant :
.map{
width:700px;
height:500px;
background:url(map.png) left top no-repeat;
position:relative;
}
.map overlay{
width:700px;
height:500px;
background:url(void.png) 700px top no-repeat;
position:absolute;
top:0;
left:0;
z-index:1;
}
.map img{
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.map tooltip{
position:absolute;
border-radius:5px;
color:#fff;
background:#000;
padding:0 10px;
display:inline;
top:0;
left:0;
z-index:3;
}
Alors, j'ai vérifié ces codes en long en large et en travers mais je ne vois rien qui cloche.
Après, je me dis que c'est peut-être une erreur provenant de mes fichiers image.
Il faut 2 images :
- "map.png" 19600x500 large comme la carte + (la carte x le nombre de régions) Ici 28x700px de large (énorme!)
- "void.png" image vide d'une taille libre (je l'ai mise à 800x600)
je vous joins "map.png" ci-dessous en visuel (attention c'est tout petit du coup).
A voir également:
- Zones cliquables sur carte interactive !
- Carte d'identité - Accueil - Services publics
- Pile carte mere - Guide
- Changer carte graphique - Guide
- Mettre des points sur une carte - Guide
- Débloquer carte sim sans code puk - Guide
