Home/ Questions/Q 8771721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:51:41+00:00

In simple words… ;-) I have a href list with store names and a

  • 0

In simple words… 😉

I have a href list with store names and a plan of it.
I can hover the names and the corresponding store lights up in the plan. Also hovering the plan the store light up… So far…so good…

What I can’t figure out:

I like to set the href store name in the list in bold when hovering the store on the plan.

A little code:

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go 🙂

    Here is a working Fiddle

    Jquery

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

    );

    HTML

    • 0