Note that there are some explanatory texts on larger screens.

plurals
  1. POChange href link with map area when hover the area (jQuery)
    primarykey
    data
    text
    <p>In simple words... ;-)</p> <p>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...</p> <p>What I can't figure out:</p> <p>I like to set the href store name in the list in <strong>bold</strong> when hovering the store on the plan.</p> <p>A little code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link href="style.css" rel="stylesheet" type="text/css" media="screen"/&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.maphilight.js"&gt;&lt;/script&gt; &lt;script&gt; $(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(); }); });&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;map name="WinkelPlattegrond"&gt; &lt;area id="m147" shape="rect" alt="Winkel 147" title="" coords="332,376,346,390" href="" target="" /&gt; &lt;area id="m148" shape="rect" alt="Winkel 148" title="" coords="348,371,360,391" href="" target="" /&gt; &lt;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="" /&gt; &lt;/map&gt; &lt;div style="float:left;"&gt; &lt;a href="#" id="w147"&gt;Winkel 147&lt;/a&gt;&lt;br&gt; &lt;a href="#" id="w148"&gt;Winkel 148&lt;/a&gt;&lt;br&gt; &lt;a href="#" id="w149"&gt;Winkel 149&lt;/a&gt;&lt;br&gt; &lt;/div&gt; &lt;div style="float:left;"&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/div&gt; &lt;div style="float:left;"&gt; &lt;img src="plattegrond_werk.jpg" width="733" height="800" class="map" usemap="#WinkelPlattegrond"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload