Tek bir resmin üzerinde birden fazla CSS efekti

Birkaç koordinatlı bir resim haritam var, her bölüm için hover efekti olmasını istiyorum. etkisi sadece vurgulu üzerinde şu anda ve diğer bölümler gibi normal kalmalı bölüm için görünmelidirTek bir resmin üzerinde birden fazla CSS efekti

Görüntü harita: hover efekti İstenilen

<!-- Calculations based on an original image (width,height)=(3106,2071) --> 
<img src="http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg" alt="" usemap="#Map" style="height: 715px; width: 1075px;"> 
<map name="Map" id="Map"> 
    <area alt="" title="" href="http://www.google.com" shape="poly" coords="382,37,522,37,589,157,521,276,382,278,313,158"> 
    <area alt="" title="" href="http://www.facebook.com" shape="poly" coords="171,158,309,160,379,279,311,399,170,398,101,279"> 
    <area alt="" title="" href="http://www.example.com" shape="poly" coords="315,400,380,281,517,283,590,401,520,520,384,521"> 
    <area alt="" title="" href="http://www.mail.google.com" shape="poly" coords="524,521,593,405,729,404,801,522,732,644,592,641"> 
    <area alt="" title="" href="http://www.random.com" shape="poly" coords="737,397,801,281,943,281,1013,400,945,521,803,520"> 
    <area alt="" title="" href="http://www.ebay.com" shape="poly" coords="525,277,595,159,731,158,800,277,733,396,592,398"> 
    <area alt="" title="" href="http://www.instagram.com" shape="poly" coords="735,157,803,37,941,37,1011,156,943,276,804,276"> 
</map>

img.grayscale { 
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
}

kaynak

2016-04-10 Anthony Larbalestier

http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag - bir gibi görünüyor benzer bir soru – andrey

Bilmiyorum Bunu harita alanı ile yapabileceğinizi düşünebilirsiniz, ancak bunu svg ile yapabilirsiniz:

<svg id="Map" style="height: 715px; width: 1075px;"> 
    <a xlink:href="http://www.google.com"><polygon points="382,37,522,37,589,157,521,276,382,278,313,158"/></a> 
    <a xlink:href="http://www.facebook.com"><polygon points="171,158,309,160,379,279,311,399,170,398,101,279"/></a> 
    <a xlink:href="http://www.example.com"><polygon points="315,400,380,281,517,283,590,401,520,520,384,521"/></a> 
    <a xlink:href="http://www.mail.google.com"><polygon points="524,521,593,405,729,404,801,522,732,644,592,641"/></a> 
    <a xlink:href="http://www.random.com"><polygon points="737,397,801,281,943,281,1013,400,945,521,803,520"/></a> 
    <a xlink:href="http://www.ebay.com"><polygon points="525,277,595,159,731,158,800,277,733,396,592,398"/></a> 
    <a xlink:href="http://www.instagram.com"><polygon points="735,157,803,37,941,37,1011,156,943,276,804,276"/></a> 
</svg>

ve css:

svg#Map {background:url(http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg); 
background-size:cover; 
} 

#Map polygon {fill:rgba(0,0,0,0)} 
#Map polygon:hover { 
fill:rgba(0,0,0,0.3) 
}

bu keman bkz: https://jsfiddle.net/grassog/akgs3zyt/

kaynak

2016-04-10 14:44:40 Giuseppe

Size bir ışık kutusu nasıl görüneceğini bilmek olmazdı değil mi? "= –

Onclick olayında ( '< poligon noktaları = "735,157,803,37,941,37,1011,156,943,276,804,276" onclick = "lightbox()" /> ') ama belki bu yeni bir soruyu hak ediyor? – Giuseppe

Tek bir resmin üzerinde birden fazla CSS efekti

cevap

İlgili konular