Valla oldu. Kardeşim çok sağol ya. İban at bana dediğim ülkeleride yaparsan 250 lira atayım. Yada gerisini ben yapayım pizza ısmarlıyım. Özelden ulaş
hocam aslında zor değil bak ben şimdi sarı bir top daha ekledim altta ki koda, { <circle cx="280" cy="159" r="8" fill="yellow" onclick="goToSeoAgency('Turkey')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" /> } simdi bu kodda sarı top ekledim "yellow" yazisini degisirsen renk degisiyor, cx ve cy 280 159 yaziyor karsilarinda onlarla oynayip(sayilari degisip) istedigin ülkenin üzerine getirebilirsin r 8 yazan ise topun buyuklugu sanirim, yarin ancak aksam musait olucam sen ugrassan yaparsin yani
sarı top eklenmis kod
<!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');
tooltip.innerHTML = country === 'canada' ? 'Kanada SEO Ajansı' : 'Almanya SEO Ajansı';
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://www.canada-seo-agency.example';
} else if (country === 'germany') {
window.location.href = 'https://www.germany-seo-agency.example';
}
}
</script>
</head>
<body>
<svg id="world-map">
<image xlink:href="https://mimozabilisim.com/wp-content/uploads/2023/05/AdobeStock_72061068.svg" width="100%" height="100%"/>
<circle cx="160" cy="100" r="10" fill="blue" onclick="goToSeoAgency('canada')" onmouseover="showTooltip(event, 'canada')" onmouseout="hideTooltip()" />
<circle cx="480" cy="159" r="8" fill="red" onclick="goToSeoAgency('germany')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
<circle cx="280" cy="159" r="8" fill="yellow" onclick="goToSeoAgency('Turkey')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>