Soru Görünür Alan etiketi?


Sadece odak noktasında değil, her zaman html <alan /> öğesini nasıl görebilirim?

Öyle görünüyor meli bu kadar basit ol:

html:

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

css:

area {border: 1px solid red}

Ne yaptığımın bir önemi yok, bir alanın stilini etkilemeyecek gibi görünüyor, gerçekten css'ye karşı bağışık görünüyor. Herhangi bir fikir? Ayrıca, stil içermeyen etiketlerin diğer örnekleri?


16
2017-12-15 11:13


Menşei


Zarif bir şekilde bozunan ve gelecekte istenirse daha fazla modifikasyon potansiyeli ile aynı görsel temsili sunacak alternatif bir çözüm sundum. - Sampson


Cevaplar:


jQuery Eklentisi, MapHilight:

Bulabilirsiniz jQuery eklentisi MapHilight (ölü bağlantı!) burada ilginizi çekecek.

Yeni bağlantı: https://github.com/kemayo/maphilight

Yeni demo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

HTML / CSS Alternatif

İçinde mutlak bağlantılar bulunan bir div kullanmayı öneririm. Nedeni, bu çok güzel bozulacak ve tüm seçenekleri bir bağlantı listesi olarak gösterecektir. Görüntü haritaları çok kolay olmayacak. Ayrıca, bu alternatif aynı sonuçları daha temiz ve daha modern uygulamalarla sunacaktır.

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

-

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

25
2017-12-27 03:39



Bu aynı sonuçları nasıl veriyor? Not shape="circle" asıl gönderide. - Josef Pfleger
Josef, işlevsel olarak son kullanıcı için fazla bir fark olmayacak. - Sampson
Son kullanıcı için bir fark yaratmayabilir, ancak eğer bir proje gereksinimi ise, o zaman şekil = "daire" meselesi olmaz mı? Ayrıca kullanmamalısınız display:none; Ekran okuyucular için yararlı olabilecek öğeler. Yerine kullanmak position: absolute; visibility:hidden;. Bu, öğenin gizli kalmasını engelleyerek, düzeni gizlemeyi önler ve gizlenmeyen şeyleri göz ardı eden ekran okuyucular tarafından görülmez. display:none; - Kevin Peno
Bu bağlantıyı bulmak isteyen herkes için bağlantı öldü - Seiyria


area etiket sadece kullanıcının tıklayabileceği alanı tanımlar, görsel bir temsili yoktur, bu yüzden stil oluşturmak için CSS'yi kullanamazsınız. Nereye gittiğinizi çok beğeniyorum ama ne yazık ki, ne yapmak istediğinizi başarmak için görüntü haritanızın üst kısmındaki saydam bir görüntüyü kaplamak için javascript kullanmanız gerekecektir.


15
2017-12-15 15:50



Cevabınız için teşekkürler, javascript / resim rotasını deneyeceğim. Sinir bozucu, orada bazı Bölgenin görsel temsili, varsayılan olarak çoğu tarayıcı, odak üzerinde noktalı bir anahat oluşturacaktır, fakat bu, görünüşe göre, değişmez. - graphicdivine


Yani sorunun benim için eve çarptı. İlgi alanları için kare dışında güzel küçük "şekiller" elde etmek için alan etiketlerini kullanarak benzer bir şey yapabilmeyi çok isterim. Bu yüzden biraz araştırma yaptım ve bulduğum şey:

http://www.netzgesta.de/mapper/

İstediğiniz şeyi% 100 yapacak gibi görünmüyor, ama belki bir başlangıç ​​noktasıdır.


11
2017-12-29 19:53





Keşke o kadar kolay olsaydı.

Basit şekiller çizmek istiyorsanız, HTML <canvas> öğesini kullanarak kütüphaneye nasıl bir çizim yapabilirsiniz (IE, excanvas emülatörünü gerektirir).

Yine de, yeterli miktarda Javascript gerektirecektir, ancak özellikle şekillerinizin boyutları statik değilse, yer paylaşımlı görüntülerle uğraşmaktan daha kolay / daha etkili olabilir. Oldukça iyi bir öğretici var İşte.


3
2017-12-27 03:57





Başka bir seçenek var. Bir SVG yazabilirsiniz. Ardından dolguyu belirleyerek şekli görebilirsiniz: yeşil; dolgu-opaklık: 1;

<svg height="300" width="200">
  <a xlink:href="http://stackoverflow.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>

2
2018-02-03 13:33