MAP DOM METROPOLE INTUITIVE

In this example below you will see how to do a MAP DOM METROPOLE INTUITIVE with some HTML / CSS and Javascript

Création de deux maps avec du CSS et JS. Map de la metropole et des DOM.

Thumbnail
This awesome code was written by rayser, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rayser ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MAP DOM METROPOLE INTUITIVE</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
jQuery(function($){
	$('.map_island').append('<div class="overlay-iles">').append('<div class="tooltip"></div>');
	$('.map_metro').append('<div class="overlay-metro">').append('<div class="tooltip"></div>');
	
	$('.map_island .tooltip').hide();
	$('.map_metro .tooltip').hide();
	
	//Liste des Iles
	var iles = [
	{name : 'Guadeloupe', slug: 'guadeloupe'},
	{name : 'Martinique', slug: 'martinique'},
	{name : 'Guyane', slug: 'guyane'},
	{name : 'Reunion', slug: 'reunion'},
	{name : 'Mayotte', slug: 'mayotte'}
	];
	
	var regions = [
	{name : 'Nord-Pas-De-Calais', slug: 'nordpasdecalais'},
	{name : 'Picardie', slug: 'picardie'},
	{name : 'Haute-Normandie', slug: 'hautenormandie'},
	{name : 'Basse-Normandie', slug: 'bassenormandie'},
	{name : 'Bretagne', slug: 'bretagne'},
	{name : 'Pays De La Loire', slug: 'paysdelaloire'},
	{name : 'Centre', slug: 'centre'},
	{name : 'Ile-De-France', slug: 'iledefrance'},
	{name : 'Champagne-Ardenne', slug: 'reunion'},
	{name : 'Lorraine', slug: 'lorraine'},
	{name : 'Alsace', slug: 'alsace'},
	{name : 'Franche-Compté', slug: 'franchecompte'},
	{name : 'Bourgogne', slug: 'bourgogne'},
	{name : 'Rhône-Alpes', slug: 'rhonealpes'},
	{name : 'Auvergne', slug: 'auvergne'},
	{name : 'Limousin', slug: 'limousin'},
	{name : 'Poitou-Charentes', slug: 'poitoucharentes'},
	{name : 'Aquitaine', slug: 'aquitaine'},
	{name : 'Midi-Pyrénées', slug: 'midipyrenees'},
	{name : 'Languedoc-Roussillon', slug: 'languedocroussillon'},
	{name : 'PACA', slug: 'paca'},
	{name : 'Corse', slug: 'corse'}
	];
	
	//Souris sur une ile
	$('.map_island area').mouseover(function(){
		var index = $(this).index();
		var left = -index * 400 - 400;
		$('.map_island .tooltip').html(iles[index].name).stop().fadeTo(500,1);
		$('.map_island .overlay-iles').css({ backgroundPosition : left+"px 0px" });
	});
	
	//Souris sur region
	$('.map_metro area').mouseover(function(){
		var index = $(this).index();
		var left = -index * 400 - 400;
		$('.map_metro .tooltip').html(regions[index].name).stop().fadeTo(500,1);
		$('.map_metro .overlay-metro').css({ backgroundPosition : left+"px 0px" });
	});
	
	//Souris hors de la map des iles
	$('.map_island').mouseout(function(){
		$('.map_island .overlay-iles').css({ backgroundPosition : "400px 0px" });
		$('.map_island .tooltip').stop().fadeTo(500,0);
	});
	
		//Souris hors de la map metro
	$('.map_metro').mouseout(function(){
		$('.map_metro .overlay-metro').css({ backgroundPosition : "400px 0px" });
		$('.map_metro .tooltip').stop().fadeTo(500,0);
	});
	
	});
</script>

</head>

<body>
  <div id="title">
    <h1>- CARTE INTERACTIVE -</h1>
  </div>
  
  <div id="container">
<h2>Choisissez votre destination</h2>

<a href="#" onclick="lightbox_island();">
<div id="btn">Les Départements d'outre mers</div>
</a>
<div id="island">
<div id="close_btn" onClick="lightbox_close_island();">X</div>
<div class="map_island">
<img src="http://img15.hostingpics.net/pics/430354space.png"  alt="" width="400" height="400" usemap="#Map"/>
<map name="Map">

  <area shape="poly" coords="28,80,36,69,46,67,51,77,65,74,73,83,82,79,88,63,98,65,98,60,91,51,92,41,109,30,122,42,124,55,122,60,129,73,147,74,171,92,164,95,160,95,155,101,138,94,132,94,126,104,99,105,89,98,78,100,77,106,79,114,81,120,81,147,69,161,52,169,47,169,45,160,35,143,35,127,30,117,33,107,27,93,28,79" href="https://www.google.fr/search?q=guadeloupe">
  
  <area shape="poly" coords="273,27,254,31,245,32,239,40,234,45,234,49,251,78,250,95,282,123,282,157,300,176,307,166,314,170,321,166,331,171,347,172,356,179,357,192,361,197,381,166,380,161,364,133,361,124,357,116,359,104,341,101,341,96,351,95,356,90,338,83,339,76,347,79,360,68,358,62,353,63,347,67,331,69,299,40,290,40,273,27" href="https://www.google.fr/search?q=martinique">
  
  <area shape="poly" coords="238,160,235,144,224,131,205,122,191,121,179,120,165,125,156,132,147,134,142,141,142,153,136,159,128,163,126,179,132,187,141,194,141,210,154,219,169,226,175,235,188,236,206,244,225,246,240,243,251,243,261,238,262,207,266,193,256,180,240,160" href="https://www.google.fr/search?q=reunion">
  
  <area shape="poly" coords="125,237,113,235,82,220,77,223,73,235,64,245,56,250,56,262,60,275,60,289,64,299,75,307,81,314,75,320,74,327,73,340,65,352,60,360,66,365,75,365,83,370,90,359,104,363,114,361,128,365,149,350,150,328,175,289,168,272,157,270,154,260,142,257,126,236" href="https://www.google.fr/search?q=guyane">
  
  <area shape="poly" coords="335,247,342,246,360,246,378,259,375,270,376,272,378,277,369,280,358,298,358,305,368,316,367,326,359,333,361,343,353,343,350,349,350,353,345,356,348,362,362,364,359,375,349,376,348,382,342,375,334,383,326,383,319,376,315,377,310,377,312,367,306,367,299,362,309,353,308,348,302,348,295,334,298,329,307,329,312,334,315,342,324,346,331,344,326,334,313,317,304,309,306,305,308,294,305,280,305,272,295,270,290,264,287,267,277,262,279,257,283,252,277,248,284,235,295,235,290,234,303,214,311,209,312,214,308,221,322,233,324,243,336,245" href="https://www.google.fr/search?q=mayotte">
</map>
</div>
<div id="fade_island" onClick="lightbox_close_island();"></div> 
</div>


<a href="#" onclick="lightbox_metro();">
<div id="btn">La Metropole</div>
</a>
<div id="metro">
<div id="close_btn" onClick="lightbox_close_metro();">X</div>
<div class="map_metro">
<img src="http://img15.hostingpics.net/pics/430354space.png"  alt="" width="400" height="400" usemap="#Map2"/>

<map name="Map2">
  <area shape="poly" coords="167,41,168,24,172,19,191,15,197,29,207,26,211,36,219,37,222,42,229,43,234,56,222,53,197,55,183,48,179,48,174,42,168,42" href="#">
  
  <area shape="poly" coords="168,41,175,42,180,49,185,47,197,55,224,54,234,57,235,65,231,68,230,81,225,78,222,84,222,95,216,103,208,92,196,93,183,88,174,91,170,89,173,80,172,66,168,57,159,55,165,48,171,51,168,44,168,43" href="#">
  
  <area shape="poly" coords="163,55,169,56,174,66,174,79,170,83,169,89,165,93,165,95,161,105,157,102,149,108,144,99,135,101,138,89,135,76,129,75,132,65,155,60,161,53" href="#">
  <area shape="poly" coords="135,77,137,88,136,99,143,102,147,107,151,113,151,119,146,119,147,125,138,123,133,115,126,118,122,111,108,115,97,113,89,113,87,107,90,107,83,102,85,99,85,85,81,80,77,63,86,68,87,68,94,68,94,72,101,81,102,78,116,81,120,84,133,78" href="#">
  <area shape="poly" coords="88,110,90,115,96,111,97,120,100,127,91,139,72,143,69,149,55,150,48,146,44,150,40,149,23,137,10,135,2,124,12,124,11,117,4,115,3,105,16,105,32,96,41,96,47,96,54,108,60,105,79,103,79,108,89,109" href="#">
  <area shape="poly" coords="99,114,103,114,108,117,123,112,124,117,134,117,138,123,147,127,150,129,147,131,145,142,136,148,129,148,128,165,123,170,105,170,100,175,107,184,107,198,93,199,73,192,66,178,70,168,64,165,68,158,57,158,57,147,69,150,74,143,90,139,100,127,96,116" href="#">
  <area shape="poly" coords="128,165,128,159,129,147,138,146,148,137,148,131,146,125,148,120,150,120,150,112,148,109,154,103,159,106,166,98,176,122,183,121,190,125,190,130,203,129,208,133,205,140,202,158,206,170,207,180,193,185,193,193,187,196,172,194,156,198,148,189,141,171,132,171,128,167" href="#">
  <area shape="poly" coords="165,92,165,101,177,123,179,120,188,125,191,130,202,129,207,120,214,120,216,112,215,106,216,102,211,95,208,92,199,92,182,88,175,90,171,84,165,89" href="#">
  <area shape="poly" coords="214,119,216,112,215,107,215,99,222,94,221,83,226,79,229,82,232,71,234,64,234,56,246,56,246,53,250,50,250,59,260,66,262,71,257,75,256,83,254,89,257,97,252,102,275,126,275,131,279,135,272,144,267,149,255,145,255,137,249,134,243,134,236,137,226,137,214,122" href="#">
  <area shape="poly" coords="263,72,269,76,280,74,281,78,284,73,295,76,299,81,319,83,323,87,319,94,310,93,306,97,313,101,311,116,315,121,306,138,297,133,284,133,277,136,274,130,276,124,254,104,258,96,253,91,256,89,256,77,262,73" href="#">
  <area shape="poly" coords="308,98,310,93,319,96,324,88,331,88,339,90,335,98,331,101,327,119,321,125,323,143,325,145,319,153,313,150,309,147,310,142,306,137,313,119,309,119,313,104,310,99" href="#">
  <area shape="poly" coords="312,150,311,148,311,145,305,136,298,134,284,133,280,137,271,145,268,148,268,153,271,159,264,168,267,175,270,184,269,194,269,198,273,200,276,198,277,201,281,199,289,195,287,183,289,187,297,180,297,171,303,169,303,166,305,166,315,156,312,150" href="#">
  <area shape="poly" coords="206,184,206,172,203,160,204,144,207,134,202,129,205,121,212,121,226,137,236,137,243,132,253,133,255,139,255,146,262,150,267,147,267,152,272,159,263,167,266,169,266,171,269,185,269,193,259,192,255,200,242,200,242,205,232,205,228,199,232,198,231,192,222,192,222,184,215,185,204,184" href="#">
  <area shape="poly" coords="259,193,268,194,269,199,275,198,278,199,288,197,287,203,296,197,303,193,310,197,313,213,309,217,311,222,319,230,318,238,307,242,294,244,293,246,297,251,285,257,275,268,275,274,280,276,277,282,268,280,262,275,254,276,250,279,245,275,239,276,235,276,231,260,244,248,245,239,239,234,231,238,230,230,225,219,224,213,225,212,225,203,232,201,233,205,242,205,242,199,255,199,260,191" href="#">
  <area shape="poly" coords="233,261,246,249,247,241,239,234,230,238,231,232,223,219,224,214,226,213,226,206,231,202,231,192,222,189,222,183,216,188,208,182,192,185,192,192,186,196,193,211,188,220,192,234,180,253,183,265,189,265,198,255,204,262,214,255,232,260" href="#">
  <area shape="poly" coords="182,251,191,233,189,220,195,212,185,196,172,195,158,198,147,204,145,214,147,217,143,224,156,235,161,250,171,254,182,251" href="#">
  <area shape="poly" coords="143,225,147,221,146,213,146,205,158,199,148,187,141,174,139,171,132,170,127,167,123,170,107,169,101,175,106,183,106,197,93,197,91,202,85,198,82,202,96,211,90,214,86,211,82,210,87,213,92,224,98,227,103,236,118,244,132,242,131,234,143,224" href="#">
  <area shape="poly" coords="144,224,157,235,160,252,148,287,116,293,115,301,122,313,112,337,103,335,97,330,76,325,81,318,71,310,77,307,82,268,90,266,86,261,88,231,92,230,99,236,102,243,104,237,116,244,133,240,131,235,145,223" href="#">
  <area shape="poly" coords="161,247,166,253,180,252,182,264,189,264,198,254,205,262,213,282,217,294,184,312,175,311,166,321,176,325,173,335,180,341,170,346,142,335,139,341,118,342,114,335,120,313,114,303,115,293,146,288,158,261,159,244" href="#">
  <area shape="poly" coords="215,255,230,259,238,276,242,276,251,280,259,290,252,294,244,309,232,307,204,322,207,346,210,350,192,356,179,352,176,353,170,346,178,342,172,338,177,329,168,320,176,311,189,311,216,293,215,284,205,264,214,255" href="#">
  <area shape="poly" coords="250,278,255,276,261,275,265,279,277,283,279,278,275,276,275,270,283,259,297,250,294,249,294,244,305,246,310,252,320,260,314,264,313,276,326,278,337,276,340,284,329,301,313,307,308,319,289,326,275,315,251,314,243,310,250,294,257,291,251,280" href="#">
  <area shape="poly" coords="364,346,379,332,383,335,384,324,386,321,388,337,394,338,394,360,392,362,392,376,386,385,373,376,372,358,365,356,365,348" href="#">
</map>
</div>
<div id="fade_metro" onClick="lightbox_close_metro();"></div> 
</div>

</div>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rayser/map-dom-metropole-intuitive-AjDec */
body {
  padding: 0;
  margin: 10px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #666;
  background-image: url(http://img4.hostingpics.net/pics/93806132bg.jpg);
  background-position: center top;
  background-repeat: none;
}

a {
  text-decoration: none;
}

h1 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 45px;
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
  color: white;
}

h2 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 36px;
  margin-top: 0px;
  margin-bottom: 10px;
}

#container {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  width: 60%;
  border: 2px solid #666;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
}

#btn {
  font-size: 26px;
  width: auto;
  text-transform: uppercase;
  color: white;
  line-height: 25px;
  padding: 8px;
  background-color: #88cee7;
  margin: 0 auto 10px;
  border-radius: 5px;
}

#btn:hover {
  background-color: #de4e4e;
  box-shadow: #333;
}

.map_island {
  width: 400px;
  height: 400px;
  background: url(http://img15.hostingpics.net/pics/418894maphover.png) left top no-repeat;
  position: relative;
  margin: 0 auto;
  background-color: white;
  z-index: 99;
  border-radius: 10px;
  border: 5px solid #88cee7;
}

.map_island .overlay-iles {
  height: 400px;
  width: 400px;
  background: url(http://img15.hostingpics.net/pics/418894maphover.png) 400px top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1003;
}

.map_island img {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1004;
  left: 0px;
}

.map_island .tooltip {
  position: fixed;
  padding: 0 10px;
  top: 470px;
  z-index: 1000;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  text-transform: uppercase;
  color: white;
  font-size: 22px;
  background-color: #88cee7;
  border-radius: 5px;
}

.map_metro {
  width: 400px;
  height: 400px;
  background: url(http://img15.hostingpics.net/pics/683207metropole.png) left top no-repeat;
  position: relative;
  margin: 0 auto;
  background-color: white;
  z-index: 99;
  border-radius: 10px;
  border: 5px solid #88cee7;
}

.map_metro .overlay-metro {
  height: 400px;
  width: 400px;
  background: url(http://img15.hostingpics.net/pics/683207metropole.png) 400px top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1003;
}

.map_metro img {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 1004;
  left: 3px;
}

.map_metro .tooltip {
  position: fixed;
  padding: 0 10px;
  top: 470px;
  z-index: 1000;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  text-transform: uppercase;
  color: white;
  font-size: 22px;
  background-color: #88cee7;
  border-radius: 5px;
}

#fade_island, #fade_metro {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 0;
  -moz-opacity: 0.7;
  opacity: .70;
  filter: alpha(opacity=70);
}

#island {
  display: none;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -205px;
  z-index: 99;
  overflow: visible;
}

#metro {
  display: none;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -205px;
  z-index: 99;
  overflow: visible;
}

#close_btn {
  width: 20px;
  height: 20px;
  float: right;
  position: relative;
  font-size: 20px;
  padding: 7px;
  border-radius: 5px;
  background: #88cee7;
  z-index: 2000;
  color: white;
  cursor: pointer;
  text-align: center;
  top: 0;
}


/*Downloaded from https://www.codeseek.co/rayser/map-dom-metropole-intuitive-AjDec */
window.document.onkeydown = function (e)
{
	if (!e){e = event;}
	if (e.keyCode == 27)
	{lightbox_close_metro();}
	{lightbox_close_island();}
}

function lightbox_island()
{
    window.scrollTo(0,0);
    document.getElementById('island').style.display='block';
    document.getElementById('fade_island').style.display='block'; 
}

function lightbox_close_island()
{
    document.getElementById('island').style.display='none';
    document.getElementById('fade_island').style.display='none';
}

function lightbox_metro()
{
    window.scrollTo(0,0);
    document.getElementById('metro').style.display='block';
    document.getElementById('fade_metro').style.display='block'; 
}

function lightbox_close_metro()
{
    document.getElementById('metro').style.display='none';
    document.getElementById('fade_metro').style.display='none';
}// JavaScript Document

Comments