<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive World Map with Tooltips</title>
<style>
#world-map {
width: 1000px;
height: 500px;
border: 1px solid black;
position: relative;
}
.tooltip {
position: absolute;
background-color: white;
padding: 5px;
border: 1px solid black;
display: none;
}
</style>
<script>
function showTooltip(event, country) {
const tooltip = document.getElementById('tooltip');
switch (country) {
case 'canada':
tooltip.innerHTML = 'Kanada SEO Ajansı';
break;
case 'germany':
tooltip.innerHTML = 'Almanya SEO Ajansı';
break;
case 'chile':
tooltip.innerHTML = 'Şili SEO Ajansı';
break;
case 'france':
tooltip.innerHTML = 'Fransa SEO Ajansı';
break;
case 'turkey':
tooltip.innerHTML = 'Türkiye SEO Ajansı';
break;
case 'iran':
tooltip.innerHTML = 'İran SEO Ajansı';
break;
}
tooltip.style.display = 'block';
tooltip.style.left = event.clientX + 'px';
tooltip.style.top = event.clientY + 'px';
}
function hideTooltip() {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
function goToSeoAgency(country) {
if (country === 'canada') {
window.location.href = 'https://mimozabilisim.com/kanada-seo-ajansi/';
} else if (country === 'germany') {
window.location.href = 'https://mimozabilisim.com/portfolio/almanya-yasli-bakim-sitesi-web-tasarim/';
}
// Diğer ülkeler için bağlantıları buraya ekleyin
}
</script>
</head>
<body>
<svg id="world-map">
<image xlink:href="https://mimozabilisim.com/wp-content/uploads/2023/05/AdobeStock_72061068-1.svg" width="100%" height="100%"/>
<circle cx="210" cy="110" r="10" fill="blue" onclick="goToSeoAgency('canada')" onmouseover="showTooltip(event, 'canada')" onmouseout="hideTooltip()" />
<circle cx="490" cy="159" r="8" fill="red" onclick="goToSeoAgency('germany')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
<circle cx="230" cy="230" r="8" fill="green" onclick="goToSeoAgency('chile')" onmouseover="showTooltip(event, 'chile')" onmouseout="hideTooltip()" />
<circle cx="440" cy="120" r="8" fill="purple" onclick="goToSeoAgency('france')" onmouseover="showTooltip(event, 'france')" onmouseout="hideTooltip()" />
<circle cx="560" cy="220" r="8" fill="orange" onclick="goToSeoAgency('turkey')" onmouseover="showTooltip(event, 'turkey')" onmouseout="hideTooltip()" />
<circle cx="650" cy="180" r="8" fill="brown" onclick="goToSeoAgency('iran')" onmouseover="showTooltip(event, 'iran')"
onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>

En son bu kadar geliştirdim

www.mimozabilisim.com üzerinde ama diğerlerine (Şili, Fransa vb linkimi verince kod hata veriyor. Daha doğrusu tüm linkler çalışmıyor.)