cssイメージマップを有効にするhtmlリンクを取得する

Question

他のいくつかの質問を見てきましたが、私にこれを説明するものは見つかりませんでした。私はかなり初心者です。これはこのウェブサイト用です：http://www.lostpathway.com/village.html 私はcssでイメージマップを持っています（下記参照）。私はそれを持っているので、マップ上をマウスで移動してエリアをクリックすると、対応するWebページに移動します。また、ページの上部には、メニューにホバー効果があり、対応するページに移動するCSSメニューがあります。私がしたいのは、メニューとイメージマップをリンクすることで、メニュー領域の上にマウスを置くとイメージマップのホバーがアクティブになり、その逆も同様になります。私はこれを行う方法を理解することができませんでした。どんな助けも歓迎されるでしょう。

/* 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

要素はあなたが非常に必要とする、あなたのケースで

など兄弟、両親、あるときのいくつかの例を除いて、他のホバー時にスタイルを変更するには、純粋なCSSの方法はありません少量のJqueryでは、例として "メモリツリー"リンクを使用します。

同じhref値と同じクラスの各<a>を与える：

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

その後のjQueryには：

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