maphilight and general behaviour

maphilight and general behaviour

Hi,

I have an image with a bunch of coordinates on it that I highlight with the maphilight plugin and it really works great but my problem is when I want to do a simple animation like showing a piece of text.

When I hover over an area the piece of text that is related to the area being hovered should show, simple, yet I can't get it to work. The other piece of code I used in other projects and it worked then so I guess my real question is, how do I make the two elements work together.

HTML

  1. <script type="text/javascript" src="jquery-1.5.2.js"></script>
  2. <script type="text/javascript" src="jquery.maphilight.min.js"></script>
  3. <script type="text/javascript" src="jquery.metadata.min.js"></script>
  4. <script type="text/javascript" src="buttons.js"></script>
  5. <script>$(function() {
  6.         $('.wheel').maphilight({stroke: false});
  7.     });</script>
  8. <title>Untitled Document</title>
  9. </head>

  11. <body>
  12.   <img class="wheel" src="wheel.png" width="600" height="600" usemap="#obo">
  13. <map name="obo">
  14.  
  15.   <area shape="poly"
  16. coords="244,182,196,68,215,61,233,55,253,51,275,49,290,49,290,173,279,173,268,173,256,176"
  17. href="#" id="at-dead-end" class="test" rel="" />
  18.  
  19.   <area shape="poly"
  20. coords="203,207,119,121,133,107,146,96,163,85,181,74,197,67,243,181,234,185,224,191,214,198"
  21. href="#" id="your-choice" class="" rel="" />
  22.  
  23.   <area shape="poly"
  24. coords="174,252,63,209,70,192,82,170,91,154,105,136,118,121,203,208,195,216,188,226,179,238"
  25. href="#" id="inspiration" class="test" rel="" />
  26.  
  27.   <area shape="poly"
  28. coords="163,297,47,297,46,283,49,263,51,248,56,228,62,209,173,251,171,261,168,270,165,285"
  29. href="#" id="fatherless" class="test" rel="" />
  30. </map>
  31.  </div>

  33. <div class="text-1">
  34.     <p>Here is the test text to show on button hover</p>
  35. </div>


JS to make the text show

  1. $(document).ready(function(){
            $(".text-1").hide();
            $(".test").hover(function(){
            $(this).next(".text-1").slideToggle("fast");
            return true;
        });
    });





at the moment this script hides the text as it should but I can't get it to show again when hovering over anything.

Thanks for any help.