Bir css görüntü haritasının etkinleştirilmesi için bir html bağlantısı alınıyor

Question

Diğer bazı sorulara baktım ama bunu bana açıklayan hiçbir şey bulamadım. Bu konuda oldukça yeni başlıyorum. Bu web sitesi için: http://www.lostpathway.com/village.html CSS'de bir görüntü haritanım var (aşağıya bakın). Bende harita üzerinde gezindiğinizde ve bir bölgeye tıkladığınızda ilgili web sayfasına giderim. Ayrıca, sayfanın üst kısmında, menüde gezinme etkisi olan ve ilgili sayfaya giden bir css menüsü var. Yapmak istediğim şey menüyü ve görüntü haritasını birbirine bağlamak, böylece menü alanı üzerine geldiğinizde aynı zamanda görüntü haritasının üzerine gelmesini ve tersini de etkinleştirmektir. Bunu nasıl yapacağımı anlayamadım. Her türlü yardıma açığım. elementler Senin durumunda vb

kardeş, anne olduklarında birkaç durumlar dışında başka bir vurgulu üzerine stilini değiştirmek için saf CSS hiçbir yolu yoktur

/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;}/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;} 

Answer 1

Eğer çok ihtiyaç Küçük miktarda JQuery, "Bellek Ağacı" bağlantılarınızı örnek olarak kullanacağız. JQuery içinde Sonra

<a href="./memory.html" id="memory1" class="memory"> <span> ... </span> </a> 
<a href="./memory.html" id="memory2" class="memory"> <img> </a> 

:

aynı href değerle her <a> aynı sınıf ver

$(".memory").on("mouseover", function() { 
    $("#memory1").css("background-color","green"); // Whatever green that is 
    $("#memory2").css("background", "url(./villagemap.gif) -31px -740px no-repeat"); 
});