"ReferenceError: $ is not defined" bug with Firefox
Hi, i am using jquery for creating highlighted hotspots in a image. The idea consists of highlight some areas of the picture when the mouse is over those areas. The code is as follows (sorry for the plain text; the code shall run in Eclipse Process Framework Composer and this enviroment is not the most confortable for coding).
Once generated the .html, it works perfect with IE (i attach a screenshot of the html file opened with IE showing one of the areas highlighted) but with Firefox the web works properly but the areas are not highlihted. I have used the firefox console and it says "
ReferenceError: $ is not defined "; i know that his error occurs when there is some mistake with the reference or the path to jquery.js; i have tested the paths, the references, i have declared the jquery .min file and the normal jquery file and nothing fix the bug. I have spent all my ideas, could anyone, please, help me?
Thank you so much in advance for your interest and help.
<p>
<script type="text/javascript" src="D:\Mis Documentos\Desktop\Documentacion\GC\Method Libraries\PYP\guidances\supportingmaterials resources\jquery-1.11.1.min.js"></script>
</p>
<p>
<script type="text/javascript" src="D:\Mis Documentos\Desktop\Documentacion\GC\Method Libraries\PYP\guidances\supportingmaterials\resources\jquery-1.11.1.js"></script>
</p>
<p>
<script type="text/javascript" src="D:\Mis Documentos\Desktop\Documentacion\GC\Method Libraries\PYP\guidances\supportingmaterials\resources\jquery.maphilight.min.js"></script>
</p>
<img class="map" alt="" src="resources/Agile_project.jpg" usemap="#Agile" /> <map id="Agile" name="Agile">
<area title="Initation" shape="rect" coords="20,395,247,180" />
<area title="Planning & estimation" shape="rect" coords="357,395,636,180" />
<area title="Product implementation" shape="circle" coords="805,155,55" />
<area title="Release and maintenance" shape="rect" coords="928,395,1287,180" />
</map>
<p>
<script type="text/javascript">
$(function () {
$('.map').maphilight({fillColor:"00ff00", stroke: false});
});
</script>
</p>