Nasıl kullanılır
- Tıklanabilir resim haritanıza temel olacak bir resmi yükleyin veya sürükleyip bırakın.
- Dikdörtgen, daire veya çokgen aracını seçin ve bağlantı vermek istediğiniz bölümlerin üzerine alanlar çizin.
- Her alanı seçerek bağlantı URL'sini, alt metnini, başlığını ve yeni sekmede açılıp açılmayacağını belirleyin.
- Oluşturulan <map> ve <area> HTML kodunu kopyalayın ya da kullanıma hazır bir .html dosyası olarak indirin.
Sıkça sorulan sorular
HTML image map (resim haritası) nedir?
HTML image map, tek bir resmin farklı bölgelerinin farklı hedeflere bağlanmasını sağlar. usemap özniteliğine sahip bir <img> etiketi ile <area> etiketleri içeren bir <map> öğesi kullanır — her hotspot için bir tıklanabilir alan. Bu araç bu alanları görsel olarak çizer ve tam coords değerlerini sizin için yazar.
Hangi resim biçimlerini kullanabilirim?
Tarayıcınızın gösterebildiği JPG, PNG, WebP ve GIF dahil her biçimi kullanabilirsiniz. Araç, dışa aktarılan koordinatların resimle tam olarak hizalanması için resmin gerçek piksel boyutlarını okur.
Resmim yüklenir mi yoksa gizli mi kalır?
Resminiz hiçbir zaman yüklenmez. Resim haritası oluşturucunun tamamı %100 tarayıcınızda çalışır; bu nedenle resim ve oluşturduğunuz HTML cihazınızda kalır ve hiçbir sunucuya hiçbir şey gönderilmez.
Tıklanabilir alan olarak hangi şekilleri çizebilirim?
Dikdörtgen, daire ve çokgen çizebilirsiniz. Dikdörtgen ve daireler sürükleyerek çizilir; çokgenler ise her noktaya tıklayıp ardından çift tıklayarak (veya Enter'a basarak) şekli kapatarak oluşturulur. Her alan doğru shape ve coords özniteliklerini dışa aktarır.
Bağlantı, alt metin ayarlayabilir ve alanları yeni sekmede açabilir miyim?
Evet. Her alan için bağlantı URL'sini (href), alt metni, bir başlık ipucunu ve hedefi ayarlayabilirsiniz. Yeni sekmede açmayı seçmek target="_blank" değerini ayarlar ve güvenlik için otomatik olarak rel="noopener" ekler.
Resim haritasını nasıl duyarlı (responsive) hâle getiririm?
Duyarlı seçeneğini açtığınızda dışa aktarılan kod, resim her yeniden boyutlandırıldığında alan koordinatlarını yeniden ölçekleyen küçük bir betik ile data-coords öznitelikleri ekler. Ayrıca parçacığın kendi kendine yeten bir blok olarak çalışması için resmi data URI olarak gömebilirsiniz.
Bu araç hakkında
Ücretsiz çevrimiçi resim haritası oluşturucu: resim yükleyin, dikdörtgen, daire ve çokgen alanlar çizin, bağlantı ekleyin ve HTML usemap kodunu kopyalayın veya indirin. %100 tarayıcınızda, yükleme yok.