0

簡単に言えば... ;-)

店舗名とその計画を記載したhrefリストがあります。名前にカーソルを合わせると、対応する店舗が計画で点灯します。また、計画をホバリングすると、ストアがライトアップされます...これまでのところ...とても良い...

私が理解できないこと：

プラン上でストアにカーソルを合わせたときに、href ストア名を太字でリストに設定するのが好きです。

ちょっとしたコード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.maphilight.js"></script>

    <script>
    $(function() { 

    $('.map').maphilight({ fillColor: 'FF0000', strokeWidth: 2, fillOpacity: 0.7 });

    $('#w147').mouseover(function(e) { $('#m147').mouseover(); }).mouseout(function(e) { $('#m147').mouseout(); }).click(function(e) { e.preventDefault(); });
     $('#w148').mouseover(function(e) { $('#m148').mouseover(); }).mouseout(function(e) { $('#m148').mouseout(); }).click(function(e) { e.preventDefault(); });
    $('#w149').mouseover(function(e) { $('#m149').mouseover(); }).mouseout(function(e) { $('#m149').mouseout(); }).click(function(e) { e.preventDefault(); }); 

    });</script>

</head>

<body>

<map name="WinkelPlattegrond">
    <area  id="m147" shape="rect" alt="Winkel 147" title="" coords="332,376,346,390" href="" target="" />
    <area  id="m148" shape="rect" alt="Winkel 148" title="" coords="348,371,360,391" href="" target="" />
    <area id="m149" shape="poly" alt="Winkel 149" title="" coords="339,375,339,364,361,364,361,369,346,369,347,375,340,375" href="" target="" />
</map>

<div style="float:left;">
<a href="#" id="w147">Winkel 147</a><br>
<a href="#" id="w148">Winkel 148</a><br>
<a href="#" id="w149">Winkel 149</a><br>
</div>

<div style="float:left;">
&nbsp;&nbsp;&nbsp;
</div>

<div style="float:left;">
<img src="plattegrond_werk.jpg" width="733" height="800" class="map" usemap="#WinkelPlattegrond">
</div>

</body>
</html>
4

3 に答える 3

1

どうぞ ：）

ここに働くフィドルがあります

Jクエリ

$('#m147, #m148, #m149').hover(
function() {$('#' +this.id.replace('m','w')).css({ 'font-weight' : 'bold' });} ,
function() {$('#' +this.id.replace('m','w')).css({ 'font-weight' : '' });}

);

HTML

于 2012-11-03T21:10:49.757 に答える
0

area対応するリンクを選択するために、ホバー イベントをタグにバインドし、ID を解析できます。クラスの変更を切り替えて、クラスを CSS ルールに追加します

$('area').hover(function(){
    $('#' +this.id.replace('m','w')).toggleClass('boldClass');
});
于 2012-11-03T21:17:41.467 に答える
0

リンクには対応する ID があるように見えますが、リンクは「w」で始まります。同じIDのタグを選択するだけです。

var s = this.id;
s = s.replace('m','w');
$("#" + s)...
于 2012-11-03T20:51:58.027 に答える