1486 sujets

Web Mobile et responsive web design

[Résolu] Responsive map et points de positionnement

Bonjour,

Voilà j'ai un souci avec un projet : j'aimerai avoir une maison de fond, et dessus des points (des icons/images avec un lien dessus) qui mènent vers une page selon le lieu/la position dans l'image de fond (la maison).

Le souci, c'est que selon la taille des écrans, les points ne se repositionnent pas au bon endroit sur l'image de fond. L'image de fond se réduit effectivement selon le format d'écran, mais les points ne bougent pas et sont décalés.

Voici le code :

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
	
	.container { 
	width: 100%;
	height: auto;
	}
	
	.image1 {
	width: 38px;
	height: 38px;
	display: inline-block;
	position: absolute;
	left: 538px;
	top: 139px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image1:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image2 {
	width: 39px;
	height: 39px;
	display: inline-block;
	position: absolute;
	left: 708px;
	top: 66px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image2:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image3 {
	width: 41px;
	height: 41px;
	display: inline-block;
	position: absolute;
	left: 653px;
	top: 276px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image3:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image4 {
	width: 33px;
	height: 33px;
	display: inline-block;
	position: absolute;
	left: 328px;
	top: 107px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image4:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image5 {
	width: 40px;
	height: 40px;
	display: inline-block;
	position: absolute;
	left: 83px;
	top: 442px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image5:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
			
	.image6 {
	width: 35px;
	height: 35px;
	display: inline-block;
	position: absolute;
	left: 566px;
	top: 489px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image6:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image7 {
	width: 35px;
	height: 35px;
	display: inline-block;
	position: absolute;
	left: 495px;
	top: 454px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image7:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image8 {
	width: 36px;
	height: 36px;
	display: inline-block;
	position: relative;
	left: 294px;
	top: 187px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image8:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
	.image9 {
	width: 32px;
	height: 32px;
	display: inline-block;
	position: absolute;
	left: 245px;
	top: 195px;
	opacity: 0,5;
	transition: all 0.5s;
}
	.image9:hover {
	width: 55px;
	height: 55px;
	opacity: 1;
	animation-delay: 1s;
	animation-duration: 1s;
	}
	
</style>
</head>
<body>
<div class="container"><img src="https://img11.hostingpics.net/pics/891824maison.png" alt="Maison" width="812" height="595" usemap="#Map"/>	
<a href="https://www.bevil.be/traitement-des-eaux/" title="Traitement des eaux"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image1"></a>
<a href="https://www.bevil.be/entretien-urgence-fosses/" title="Entretien et urgence fosses"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image2"></a>
<a href="https://www.bevil.be/detachtout/" title="Détachants"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image3"></a>
<a href="https://www.bevil.be/entretien-nettoyage-piscine/" title="Entretien et nettoyage piscine"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image4"></a>
<a href="https://www.bevil.be/toilettes-portables/" title="Additifs toilettes portables"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image5"></a>
<a href="https://www.bevil.be/cuisine/" title="Cuisine"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image6"></a>
<a href="https://www.bevil.be/entretien-allumage-feu/" title="Entretien et allumage chauffage"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image7"></a>
<a href="https://www.bevil.be/baignoire-et-douches/" title="Entretien et débouchage douches, baignoires et lavabos"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image8"></a>
<a href="https://www.bevil.be/toilettes/" title="Entretien et débouchage toilettes"><img src="https://img11.hostingpics.net/pics/637490Arrireplan.png" class="image9"></a></div>
</body>
</html>


J'espère qu'il existe une solution, sachant que c'est pour l'intégrer dans la page d'un site wordpress.

Merci d'avance pour les pistes qui pourront m'être apportées,
Bonne journée Smiley smile
Modifié par PaulineBevil (30 Aug 2017 - 14:45)
L'idée est bonne ! Mais les points ne s'accrochent pas à l'image de fond, et s'ils bougent effectivement avec le format d'écran, ils sont finalement mal placés (comme indépendant de l'image de fond) :s

Merci de la réponse
Sujet clos
Aller à