Carte Monde
Svg
7 Continents
Interactive
Javascript
Html Css Js
Visualisation
International
Animation
Snippet
Geographie
Data Viz
Carte du monde interactive HTML/CSS/JS avec les 7 continents en SVG. Idéale pour présenter une présence internationale sur site vitrine ou rapport annuel.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Carte Work HTML CSS JS SVG 2026 05080004 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
color: white;
}
.map-wrapper {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.continent {
transition: all 0.4s ease;
cursor: pointer;
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 2;
}
.continent:hover {
filter: brightness(1.4);
stroke: white;
stroke-width: 3;
transform-origin: center;
transform: scale(1.02);
z-index: 10;
}
.continent.active {
filter: brightness(1.5);
stroke: white;
stroke-width: 4;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { filter: brightness(1.2); }
50% { filter: brightness(1.6); }
100% { filter: brightness(1.2); }
}
.continent-label {
fill: white;
font-size: 14px;
font-weight: bold;
pointer-events: none;
text-anchor: middle;
paint-order: stroke;
stroke: rgba(0, 0, 0, 0.7);
stroke-width: 3px;
}
.ocean {
fill: #0a1628;
}
.graticule {
stroke: rgba(255, 255, 255, 0.05);
stroke-width: 0.5;
fill: none;
}
.continent-btn {
transition: all 0.3s ease;
border: 2px solid transparent;
padding: 12px 20px;
border-radius: 15px;
font-weight: 600;
margin: 5px;
backdrop-filter: blur(5px);
}
.continent-btn:hover {
transform: translateX(5px);
border-color: white;
}
.continent-btn.active-btn {
transform: translateX(10px);
border-color: white;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.info-panel {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tooltip-custom {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 10px 20px;
border-radius: 10px;
font-weight: bold;
pointer-events: none;
z-index: 1000;
border: 2px solid #667eea;
display: none;
}
</style>
</head>
<body>
<!-- En-tête -->
<header class="text-center py-5">
<div class="container">
<h1 class="display-3 fw-bold mb-3">
<span class="text-warning">🌍</span> Carte du Monde Interactive
</h1>
<p class="lead text-white-50">Explorez les 7 continents en survolant ou cliquant sur la carte</p>
</div>
</header>
<!-- Contenu principal -->
<div class="container mb-5">
<div class="row g-4">
<!-- Carte SVG -->
<div class="col-lg-8">
<div class="map-wrapper">
<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" id="worldMap">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Océan de fond -->
<rect width="1000" height="500" class="ocean"/>
<!-- Graticules -->
<line x1="0" y1="100" x2="1000" y2="100" class="graticule"/>
<line x1="0" y1="200" x2="1000" y2="200" class="graticule"/>
<line x1="0" y1="300" x2="1000" y2="300" class="graticule"/>
<line x1="0" y1="400" x2="1000" y2="400" class="graticule"/>
<line x1="200" y1="0" x2="200" y2="500" class="graticule"/>
<line x1="400" y1="0" x2="400" y2="500" class="graticule"/>
<line x1="600" y1="0" x2="600" y2="500" class="graticule"/>
<line x1="800" y1="0" x2="800" y2="500" class="graticule"/>
<!-- AMÉRIQUE DU NORD -->
<g class="continent-group">
<path id="northAmerica" class="continent" data-continent="northAmerica"
d="M120,60 L140,45 L180,35 L220,30 L260,40 L290,55 L310,45 L340,50 L360,65
L380,70 L395,80 L400,95 L390,110 L370,115 L350,125 L330,140
L310,150 L290,155 L270,165 L260,180 L240,185 L220,180
L200,175 L180,165 L160,155 L140,140 L125,120 L110,100 Z"
fill="#FF6B6B" opacity="0.85"/>
<!-- Groenland -->
<path d="M330,30 L350,25 L370,35 L365,55 L345,60 L325,50 Z"
fill="#FF6B6B" opacity="0.85" class="continent" data-continent="northAmerica"/>
</g>
<!-- AMÉRIQUE DU SUD -->
<path id="southAmerica" class="continent" data-continent="southAmerica"
d="M220,185 L240,180 L260,185 L275,200 L290,215 L300,235
L305,260 L295,285 L280,310 L265,330 L250,345
L235,355 L225,345 L215,325 L200,300 L190,270
L185,245 L190,220 L200,200 Z"
fill="#4ECDC4" opacity="0.85"/>
<!-- EUROPE -->
<g class="continent-group">
<path id="europe" class="continent" data-continent="europe"
d="M430,55 L450,45 L470,40 L495,45 L515,50 L530,60
L540,75 L535,90 L520,100 L505,105 L490,100
L475,95 L465,90 L455,85 L445,80 L430,75 Z"
fill="#45B7D1" opacity="0.85"/>
<!-- Scandinavie -->
<path d="M460,30 L475,25 L485,35 L480,50 L460,55 L450,45 Z"
fill="#45B7D1" opacity="0.85" class="continent" data-continent="europe"/>
<!-- Îles Britanniques -->
<path d="M420,65 L430,60 L440,65 L435,75 L425,78 L415,72 Z"
fill="#45B7D1" opacity="0.85" class="continent" data-continent="europe"/>
</g>
<!-- AFRIQUE -->
<path id="africa" class="continent" data-continent="africa"
d="M445,110 L460,105 L480,100 L500,100 L520,105 L540,115
L550,130 L555,150 L560,170 L558,190 L550,215
L540,240 L525,260 L510,280 L495,295 L480,305
L465,310 L455,300 L445,280 L440,255 L435,230
L432,205 L435,180 L440,160 L442,135 Z"
fill="#F7DC6F" opacity="0.85"/>
<!-- Madagascar -->
<path d="M565,260 L575,255 L580,270 L575,290 L565,285 Z"
fill="#F7DC6F" opacity="0.85" class="continent" data-continent="africa"/>
<!-- ASIE -->
<path id="asia" class="continent" data-continent="asia"
d="M560,45 L600,30 L650,25 L700,35 L750,50 L790,65
L820,80 L835,100 L830,130 L810,155 L780,175
L740,185 L700,190 L660,185 L630,175 L610,160
L595,145 L585,125 L575,105 L565,85 L555,65 Z"
fill="#96CEB4" opacity="0.85"/>
<!-- Japon -->
<path d="M845,90 L855,80 L860,95 L855,110 L845,105 Z"
fill="#96CEB4" opacity="0.85" class="continent" data-continent="asia"/>
<!-- Indonésie -->
<path d="M730,220 L750,215 L770,220 L780,235 L760,240 L740,235 Z"
fill="#96CEB4" opacity="0.85" class="continent" data-continent="asia"/>
<!-- OCÉANIE -->
<g class="continent-group">
<path id="oceania" class="continent" data-continent="oceania"
d="M720,280 L750,270 L780,275 L810,290 L830,310
L820,335 L800,350 L770,355 L740,345 L715,325 Z"
fill="#FFEAA7" opacity="0.85"/>
<!-- Nouvelle-Zélande -->
<path d="M855,350 L865,340 L870,360 L860,375 L850,365 Z"
fill="#FFEAA7" opacity="0.85" class="continent" data-continent="oceania"/>
</g>
<!-- ANTARCTIQUE -->
<path id="antarctica" class="continent" data-continent="antarctica"
d="M150,440 L200,430 L300,425 L400,420 L500,425
L600,420 L700,425 L800,430 L850,440
L820,460 L700,470 L500,475 L300,470 L180,460 Z"
fill="#DFE6E9" opacity="0.85"/>
<!-- Étiquettes des continents -->
<text x="250" y="120" class="continent-label" font-size="18">AMÉRIQUE</text>
<text x="250" y="140" class="continent-label" font-size="18">DU NORD</text>
<text x="250" y="280" class="continent-label" font-size="16">AMÉRIQUE</text>
<text x="250" y="298" class="continent-label" font-size="16">DU SUD</text>
<text x="480" y="72" class="continent-label" font-size="16">EUROPE</text>
<text x="500" y="220" class="continent-label" font-size="16">AFRIQUE</text>
<text x="700" y="120" class="continent-label" font-size="18">ASIE</text>
<text x="770" y="320" class="continent-label" font-size="14">OCÉANIE</text>
<text x="500" y="455" class="continent-label" font-size="14">ANTARCTIQUE</text>
</svg>
</div>
</div>
<!-- Panneau d'information -->
<div class="col-lg-4">
<div class="info-panel">
<h3 class="fw-bold mb-4">🌐 Informations</h3>
<!-- Boutons des continents -->
<div class="d-grid gap-2 mb-4">
<button class="continent-btn text-white" style="background-color: #FF6B6B;"
onclick="selectContinent('northAmerica')" id="btn-northAmerica">
🌎 Amérique du Nord
</button>
<button class="continent-btn text-white" style="background-color: #4ECDC4;"
onclick="selectContinent('southAmerica')" id="btn-southAmerica">
🌎 Amérique du Sud
</button>
<button class="continent-btn text-white" style="background-color: #45B7D1;"
onclick="selectContinent('europe')" id="btn-europe">
🌍 Europe
</button>
<button class="continent-btn text-dark" style="background-color: #F7DC6F;"
onclick="selectContinent('africa')" id="btn-africa">
🌍 Afrique
</button>
<button class="continent-btn text-white" style="background-color: #96CEB4;"
onclick="selectContinent('asia')" id="btn-asia">
🌏 Asie
</button>
<button class="continent-btn text-dark" style="background-color: #FFEAA7;"
onclick="selectContinent('oceania')" id="btn-oceania">
🏝️ Océanie
</button>
<button class="continent-btn text-dark" style="background-color: #DFE6E9;"
onclick="selectContinent('antarctica')" id="btn-antarctica">
❄️ Antarctique
</button>
</div>
<!-- Statistiques -->
<div id="continentStats" class="mt-4">
<div class="text-center text-white-50">
<p class="fs-5">👆 Cliquez sur un continent</p>
<p class="small">ou survolez la carte</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section Statistiques globales -->
<div class="container mb-5">
<div class="row g-4">
<div class="col-md-3">
<div class="stat-card">
<div class="stat-number">7</div>
<p class="text-white-50 mb-0">Continents</p>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="stat-number">195</div>
<p class="text-white-50 mb-0">Pays</p>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="stat-number">8B+</div>
<p class="text-white-50 mb-0">Habitants</p>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="stat-number">510M</div>
<p class="text-white-50 mb-0">km² Surface</p>
</div>
</div>
</div>
</div>
<!-- Tooltip pour le survol -->
<div id="tooltip" class="tooltip-custom"></div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Données détaillées des continents
const continentsInfo = {
northAmerica: {
name: 'Amérique du Nord',
emoji: '🌎',
superficie: '24,7M km²',
population: '592M',
pays: 23,
capitales: ['Washington', 'Ottawa', 'Mexico'],
couleur: '#FF6B6B',
description: '3e plus grand continent, berceau de civilisations anciennes et de mégalopoles modernes.'
},
southAmerica: {
name: 'Amérique du Sud',
emoji: '🌎',
superficie: '17,8M km²',
population: '434M',
pays: 12,
capitales: ['Brasília', 'Buenos Aires', 'Lima'],
couleur: '#4ECDC4',
description: 'Continent de la forêt amazonienne et des Andes majestueuses.'
},
europe: {
name: 'Europe',
emoji: '🌍',
superficie: '10,2M km²',
population: '747M',
pays: 44,
capitales: ['Paris', 'Berlin', 'Rome'],
couleur: '#45B7D1',
description: 'Vieux continent riche en histoire, art et culture.'
},
africa: {
name: 'Afrique',
emoji: '🌍',
superficie: '30,4M km²',
population: '1,4Md',
pays: 54,
capitales: ['Le Caire', 'Lagos', 'Nairobi'],
couleur: '#F7DC6F',
description: 'Berceau de l\'humanité, continent de diversité et de ressources.'
},
asia: {
name: 'Asie',
emoji: '🌏',
superficie: '44,6M km²',
population: '4,7Md',
pays: 48,
capitales: ['Pékin', 'Tokyo', 'New Delhi'],
couleur: '#96CEB4',
description: 'Plus grand continent, mélange fascinant de traditions et de modernité.'
},
oceania: {
name: 'Océanie',
emoji: '🏝️',
superficie: '8,5M km²',
population: '44M',
pays: 14,
capitales: ['Canberra', 'Wellington'],
couleur: '#FFEAA7',
description: 'Continent insulaire aux paysages paradisiaques et à la biodiversité unique.'
},
antarctica: {
name: 'Antarctique',
emoji: '❄️',
superficie: '14M km²',
population: '1000',
pays: 0,
capitales: ['Aucune'],
couleur: '#DFE6E9',
description: 'Continent de glace dédié à la science et à la préservation.'
}
};
let activeContinent = null;
// Fonction pour sélectionner un continent
function selectContinent(continentId) {
// Réinitialiser le précédent
if (activeContinent) {
document.getElementById(activeContinent).classList.remove('active');
document.getElementById(`btn-${activeContinent}`).classList.remove('active-btn');
}
// Activer le nouveau
activeContinent = continentId;
document.getElementById(continentId).classList.add('active');
document.getElementById(`btn-${continentId}`).classList.add('active-btn');
// Mettre à jour les informations
updateContinentInfo(continentId);
}
// Mettre à jour le panneau d'information
function updateContinentInfo(continentId) {
const info = continentsInfo[continentId];
const statsDiv = document.getElementById('continentStats');
statsDiv.innerHTML = `
<div class="text-center mb-4">
<span style="font-size: 4rem;">${info.emoji}</span>
<h3 class="fw-bold mt-2" style="color: ${info.couleur};">${info.name}</h3>
<p class="text-white-50">${info.description}</p>
</div>
<div class="row g-2">
<div class="col-6">
<div class="p-3 rounded-3 text-center" style="background: ${info.couleur}20; border: 1px solid ${info.couleur}40;">
<small class="text-white-50">Superficie</small>
<h5 class="mb-0" style="color: ${info.couleur};">${info.superficie}</h5>
</div>
</div>
<div class="col-6">
<div class="p-3 rounded-3 text-center" style="background: ${info.couleur}20; border: 1px solid ${info.couleur}40;">
<small class="text-white-50">Population</small>
<h5 class="mb-0" style="color: ${info.couleur};">${info.population}</h5>
</div>
</div>
<div class="col-6">
<div class="p-3 rounded-3 text-center" style="background: ${info.couleur}20; border: 1px solid ${info.couleur}40;">
<small class="text-white-50">Pays</small>
<h5 class="mb-0" style="color: ${info.couleur};">${info.pays}</h5>
</div>
</div>
<div class="col-6">
<div class="p-3 rounded-3 text-center" style="background: ${info.couleur}20; border: 1px solid ${info.couleur}40;">
<small class="text-white-50">Capitales</small>
<p class="mb-0 small" style="color: ${info.couleur};">${info.capitales.join(', ')}</p>
</div>
</div>
</div>
`;
}
// Initialisation
document.addEventListener('DOMContentLoaded', function() {
const tooltip = document.getElementById('tooltip');
const continents = document.querySelectorAll('.continent');
// Gestion du survol
continents.forEach(continent => {
continent.addEventListener('mouseenter', function(e) {
const continentId = this.getAttribute('data-continent');
const info = continentsInfo[continentId];
tooltip.style.display = 'block';
tooltip.innerHTML = `${info.emoji} <strong>${info.name}</strong><br><small>${info.superficie} | ${info.population}</small>`;
});
continent.addEventListener('mousemove', function(e) {
tooltip.style.left = (e.pageX + 15) + 'px';
tooltip.style.top = (e.pageY - 40) + 'px';
});
continent.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
// Clic sur le continent
continent.addEventListener('click', function() {
const continentId = this.getAttribute('data-continent');
selectContinent(continentId);
// Scroll vers le panneau d'info sur mobile
if (window.innerWidth < 992) {
document.getElementById('continentStats').scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Cacher le tooltip quand on quitte la carte
document.getElementById('worldMap').addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
// Animation d'entrée
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.stat-card').forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = `all 0.6s ease ${index * 0.15}s`;
observer.observe(card);
});
});
</script>
</body>
</html>Télécharger le fichier source