[SOLVED] Javascript tooltip problems

[mkr365]

Hello,

 

I have a few problems with the Javascript tooltip script wich i'm running on my site. When you hit a certain link then a balloon with text pops up. But I want the balloon to pop up when i'm hitting on a image, and that is something that i cannot fix.

 

Another problem is that when my balloon pops up it comes underneath the other images and it should be over the other images.

 

Can somebody help me with my code 

 

<script type="text/javascript" src="lib/prototype/prototype.js"></script>
        <script type="text/javascript" src="lib/scriptaculous/scriptaculous.js"></script>
        <script type="text/javascript" src="src/HelpBalloon.js"></script>
        <script type="text/javascript">
        <!--
        //
        // Override the default settings to point to the parent directory
        //
        HelpBalloon.Options.prototype = Object.extend(HelpBalloon.Options.prototype, {
            icon: \'images/icon.gif\',
            button: \'images/button.png\',
            balloonPrefix: \'images/balloon-\'
        });
       
        //-->
        </script>

<a href="#" id="ballon" onclick="return false;">img src="images/test.gif"</a>
<script type="text/javascript">
    new HelpBalloon({
        title: \'Mouseover Balloon\',
        content: \'test tekst ballon \'
            + \'balloon content.\',
        icon: $(\'ballon\')
    });
</script>

[mkr365]

I already have the solution:

 

<img src="images/test.gif" style="cursor:pointer" alt="tooltip" id="ballon" onclick="return false;"/>

<script type="text/javascript">

new HelpBalloon({

title: \'Mouseover Balloon\',

content: \'Collin is een aap \'

+ \'.\',

icon: $(\'ballon\')

 

});

</script>

 

And the balloon pops up underneath other images was a result of a  z-index:1 that shouldn't be there.