Harita Üzerinde Şubeleri Gösterme

25-02-2018, 22:44:05

Arkadaşlar merhaba,
Bir web sitem için özel bir çalışma yapmaya çalışıyorum. Çalışma şu şekilde;
Türkiye haritası üzerine şubelerimizi işaretledim. "usemap" etiketi ile koordinat belirtip bu şubelerin üzerine gelindiği zaman tıklanabilir hale getirebiliyorum ve o ilin üzerine gelindiği zaman görünen ek bir görsel ile içerik paylaşıyorum.
Çalışma için kullandığım kodlar şu şekilde;

<center><img src="TurkeySvg.png" usemap="#harita" ></center>
<map name="harita">
<a href="#" onmouseover="document.getElementById('tshirt').style.display='block';" onmouseout="document.getElementById('tshirt').style.display='none';">
<area shape="rect" coords="1081,244,1227,347" href="" onmouseover="this.src='samsun.png';"></a>
</map>

Bu kodları bir html dosyası oluşturup denediğim zaman sorunsuz çalışıyor. Ancak wordpress sitemin içerisine bu kodları yazdığımda ana görsel geliyor ama fonksiyonlar çalışmıyor. Nasıl çözebilirim bu durumu?

25-02-2018, 22:51:13

#2

wmalper

Siteyide yazsanizda millet tam olarak ne olduğunu görse. Hem yardım istiyorsunuz hemde url belirtmiyorsunuz.

25-02-2018, 23:15:19

#3

BiELOF

deneme html sayfasında ilgili fonksiyonlar için script veya style dosyasında tanımladınız, bu yüzden çalıştı.
Wordpress içinde aynı işlemi yaptınız mı?

26-02-2018, 12:03:36

#4

darabe

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

deneme html sayfasında ilgili fonksiyonlar için script veya style dosyasında tanımladınız, bu yüzden çalıştı.
Wordpress içinde aynı işlemi yaptınız mı?

Hocam ilgili fonksiyonlar paylaştığım kodların içerisinde tanımlı zaten. Ekstra bir kod yok. Bütün kod aşağıdaki gibidir.

<html>
<head>
<style>
</style>
<body>
 
<center><img src="TurkeySvg.png" usemap="#harita" ></center>
<map name="harita">
<a href="#" onmouseover="document.getElementById('tshirt').style.display='block';" onmouseout="document.getElementById('tshirt').style.display='none';">
<area shape="rect" coords="1081,244,1227,347" href="" onmouseover="this.src='samsun.png';"></a>
</map>
<div id="tshirt" style="position: absolute; left: 55%; top: 15px; width: whatever, height: whatever; border: 2px solid #000000; display: none;">
<img src="samsun.png" />
</div>
</body>
</head>
</html>

26-02-2018, 13:24:45

#5

Onur89TR

Bu kodlar HTML sayfada düzgün çalışmakta. Doğru mu analdım? Öyleyse TurkeySvg.png, ve diğer 2 adet samsun.png'yi tema içerisinde images klasörü açıp şöyle değiştirmeniz gerek.
http(s varsa ekleyin)://www.domainadi.com/wp-content/themes/temaadi/images/resimadi.png
Bunu koddaki 3 resim için de yaparsanız sorunsuz çalışacağını umuyorum.

26-02-2018, 17:05:52

#6

darabe

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

Bu kodlar HTML sayfada düzgün çalışmakta. Doğru mu analdım? Öyleyse TurkeySvg.png, ve diğer 2 adet samsun.png'yi tema içerisinde images klasörü açıp şöyle değiştirmeniz gerek.
http(s varsa ekleyin)://www.domainadi.com/wp-content/themes/temaadi/images/resimadi.png
Bunu koddaki 3 resim için de yaparsanız sorunsuz çalışacağını umuyorum.

Hocam bu söylediğinizi denemiştim. Bu şekilde düzenleyip paylaşmıştım zaten, ana harita geliyor ama mouse üzerine geldiğinde buton aktif olmuyor.
Tekrardan yukarıda belirttiğim kodları ekleyerek ve görsel bağlantılarını güncelleyerek wp sitemde bi bağlantı oluşturdum. Link aşağıda, direkt olarak buradan görebilirsiniz.
https://www.firfir.org/tr/harita/

26-02-2018, 19:41:14

#7

Onur89TR

İki taraftaki kod aynı değil. onmouseover ve onmouseout event'ları eklenmemiş verdiğiniz sitede.

26-02-2018, 21:02:38

#8

darabe

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

İki taraftaki kod aynı değil. onmouseover ve onmouseout event'ları eklenmemiş verdiğiniz sitede.

Hocam valla aynı kodu ekliyorum. Tekrar düzenledim paylaştım ama yine durum aynı.

02-03-2018, 09:26:26

#9