JQuery Map Highlight please help..
Hello everyone,
I'm quite new to jquery. I'm trying to highlight the areas of the image map with the maphightlight plugin.
Following is my code..i have added some <div's> inside the <body> tag as compared to the example given at
http://plugins.jquery.com/project/maphilight
I can see the image map's but i cannot see the highlight..please help..
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>static</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="PageFunctions.js"></script>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>
<script>$(function() {
$('.map').maphilight();
});</script>
</head>
<body>
<div id="3" class="component" style="width:620px; height:50px; margin-left:10px; margin-top:8px;overflow:hidden">
<div xmlns="">
<h1>static</h1>
</div>
</div>
<div id="4" class="component" style="width:620px; height:70px; margin-left:10px; margin-top:69px;overflow:hidden">
<div style="text-align:justify;">
<div>
<span>Rollover test for static text</span>
<br />
</div>
</div>
</div>
<div id="5" class="component" style="width:620px; height:320px; margin-left:10px; margin-top:148px;overflow:hidden">
<div id="divImgContainer">
<img src="demo_simple.png" title="" style="width:428.048387096775px; height:320.000000000001px; display:block; margin-left:auto; margin-right:auto; position:relative; top:0px;" usemap="#simple" />
</div>
</div>
<map name="simple">
<area href="#" shape="poly" coords="47,62, 106,61, 134,72, 135,118, 30,116" title="Default behavior"></area>
<area href="#" shape="poly" coords="32,157, 133,157, 127,192, 127,211, 28,211" class="{strokeColor:'0000ff',strokeWidth:5,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="circ" coords="290,102,30" class="{stroke:false,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="poly" coords="219,190, 225,175, 237,157, 239,148, 245,142, 251,140, 263,140, 265,139, 310,139, 311,145, 364,182, 363,201, 343,221, 333,213, 329,181, 313,177, 330,234, 295,231, 292,174, 279,176, 282,204, 269,220, 255,206, 267,167, 235,193" class="{stroke:false,fillColor:'000000',fillOpacity:1}" title="Metadata'd up a bit"></area>
</map>
</body>
</html>