Dünya Haritası üzerinde ülkeleri gelince link olan kod yardım

06-05-2023, 01:09:36

#1

ideal11lihacker

Arkadaş bu aşağıdaki kodda şu ilk verdiğim svg formatındaki haritayı göstertemedim. Dünya üzerinde seo ajansı olduğum yerleri işaretletecektim

https://mimozabilisim.com/wp-content...k_72061068.svg

(Bu svg Dünya haritası)

(aşağıdakide kod) diğer şeyler çalışıyor şimdilik Kanada ve Almanya)

<!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">

<circle cx="200" cy="100" r="10" fill="blue" onclick="goToSeoAgency('canada')" onmouseover="showTooltip(event, 'canada')" onmouseout="hideTooltip()" />
<circle cx="400" cy="200" r="10" fill="red" onclick="goToSeoAgency('germany')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>

Dünya haritasını nasıl göstertebilirim.

Doğru cevaba pizza ısmarlıyacam kabul ederse
06-05-2023, 01:25:46

#2

kuklux

<!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="200" cy="100" r="10" fill="blue" onclick="goToSeoAgency('canada')" onmouseover="showTooltip(event, 'canada')" onmouseout="hideTooltip()" />
<circle cx="400" cy="200" r="10" fill="red" onclick="goToSeoAgency('germany')" onmouseover="showTooltip(event, 'germany')" onmouseout="hideTooltip()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>

telefondan max bu kadar yaptim dunya haritasi gozuktu
06-05-2023, 01:36:19

#3

ideal11lihacker

Dünya haritası gözüküyor ama koordinatlar tutmuyor Kanada neredeyse tuttu Almanya açıkta
06-05-2023, 01:41:58

#4

ideal11lihacker

Arkadaşlar kodu bu şekilde Türkiye, Almanya, Kanada, ABD, İran, Şili, Fransa bi kaç daha olabilir koordinatlarını tutturup yazabilecek olan varmı. Koordinatlı bölgeye gelince tıklamada o ilgili sayfa linkime gidecek. Teklife açığım. 200 - 250 lira bütçem var
06-05-2023, 01:44:51

#5

kuklux

ideal11lihacker adlı üyeden alıntı: mesajı görüntüle

Dünya haritası gözüküyor ama koordinatlar tutmuyor Kanada neredeyse tuttu Almanya açıkta

kordinat dediğiniz o topun ülke üzerine gelmesi ise şunu denesenize bi hocam

<!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()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>
06-05-2023, 01:54:42

#6

ideal11lihacker

kuklux adlı üyeden alıntı: mesajı görüntüle

kordinat dediğiniz o topun ülke üzerine gelmesi ise şunu denesenize bi hocam

<!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()" />
</svg>
<div id="tooltip" class="tooltip"></div>
</body>
</html>

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ş
06-05-2023, 01:59:17

#7

kuklux

ideal11lihacker adlı üyeden alıntı: mesajı görüntüle

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>
06-05-2023, 02:04:20

#8

ideal11lihacker

Çok sağol ya alacak verecek yok mu? ama bak pizza seviyorsan söz verdim
06-05-2023, 02:08:44

#9

kuklux

ideal11lihacker adlı üyeden alıntı: mesajı görüntüle

Çok sağol ya alacak verecek yok mu? ama bak pizza seviyorsan söz verdim

iban iletiyorum hocam 800 + kdv fatura isterseniz + 10 tl pizzayi severim hocam ama yarın dışarı çıkacağım falan onun için benim yerime siz yeseniz de olur