Javascript issue

I am at wits end and was hoping someone could help me. I have a simple javascript that works perfectly on my html editor, however when I try it on WordPress it does not work.

Goal: To show hidden <div> on areamap rollover. the area map is working however the hidden <div> are not showing up when areas are rolled over.

I am using the theme called Fusion.

Attempts: I have tried calling the .js externally and installing it internally, nothing has worked. I have tried adding the style to the main .css (ie: <div id=”sub1″ class=”stylename”>) and have tried on the page (as you will see below) I am not a .php expert.

—–
Javascript is:
<script type=”text/javascript”>
function setVisibility(id, visibility) {document.getElementById(id).style.display = visibility;}
</script>

Callout in HTML:
<area onmouseover=”setVisibility(‘sub1’, ‘inline’);” onmouseout=”setVisibility(‘sub1′,’none’);” shape=”circle” coords=”274,171,20″ href=”../index.php” />My text

Hidden <div> html:
<div id=”sub1″ style=”position: absolute; left: 300px; top: 100px; background-color: #306080; width: 180px; padding: 10px; color: white; font-size: 10pt; display: none”>my text</div>
—–
What am I doing wrong? Any help you can provide would be greatly appreciated as this issue is driving me crazy. Thank you in advance for your time and assistance