Bir şekline gezinip/muhtemelen CSS</em> tıklayarak ile SVG kaynak dosyası ile (<code><img></code> etiketi <em>tespit edebilmek istiyorum Javascript veya CSS

Question

bir şekle değil, onun kutu modelin dikdörtgen, tıklama/hover Algılama) ama etrafında kutu model emlak değil. Aşağıdaki resimde, bir tıklamayı/gezinmeyi dinleyen alan açık mavi renkte iken, "ekstra" site turuncu renktedir. Bir tıklama/gezinip dinleyerek aşağıdakine - Benim özel durumda

, iki çevreleri üst üste tane var. Bu nedenle, açık mavi anulusun sadece onları dinlemesini istiyorum. Bununla birlikte, kutu modeline göre, alttaki dairenin bir tıklama/gezinmeyi algılaması için kullanıcının bu kare turuncu şeride tıklanması veya üzerine gelmesi gerekir.

Answer 1

senin bir SVG görüntüyü dönüştürmek ve onclick olayı için bölgeyi belirlemek için bir resim haritası poligonu kullanmak gerekir diye düşünüyorum.

https://developer.mozilla.org/en/docs/Web/HTML/Element/map

Answer 2

Ayrıca, resminiz ayarlı CSS border-radius ve arka plan-görüntü ile iki div'leri (bir başka etrafında wraped) kullanarak bunu elde edebiliriz. stopPropagation() ve cancelBubble ile favorinize tıklatma davranışını ayarlayabilirsiniz.

HTML

<div class="big_cycle" onclick="alert ('clicked');"> 
    <div class="small_cycle" onclick="event.cancelBubble = true; event.stopPropagation();"></div> 
</div> 

CSS

.big_cycle { 
    width: 50px; 
    height: 50px; 
    position: relative; 
    cursor: pointer; 
    background-color: #f00; 
    border: 1px solid #000; 
    border-radius: 25px; 
} 

.small_cycle { 
    width: 28px; 
    height: 28px; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    cursor: default; 
    background-color: #0f0; 
    border: 1px solid #000; 
    border-radius: 14px; 
} 

Bunu göstermek için basit bir Plunker yaptı: Eğer olduğu gibi bir `` etiketini kullanarak vazgeçmelerini tavsiye sürece Click me