Need help modifying a great script

[Haitashi]

I found this awesome help bubble script. I haven't been able to do one thing. What instantiates the bubble is an icon. I need to use both an icon and text. For instance I want to have a small letter image next to the word "Email" and of you click on any of them you get the bubble.

Any help will be greatly appreciated!!!

Here's how you call it:

<script type="text/javascript">
                        hb1 = new HelpBalloon({
                            icon: '/images/profile_images/mail.gif',
                            title: '#Variables.oStudent.username#@THISDOMAIN.com',
                            altText: 'E-mail',
                            content: ' '
                        });
                    </script>

[Haitashi]

You may download the code HERE .

[pbmods]

Those balloons don't work properly in Safari, incidentally. They appear and disappear rapidly when clicking on the icon.

Referenced from this page:
http://www.beauscott.com/examples/help_balloons/

No JS errors that I can see.

[acoder]

Moved from Articles section. Please do not post questions in the Articles section.

[Haitashi]

It seems to work fine on my copy of Safari.

I just can't find a way to modify it in order to use text links instead of just images to call the bubble.

[pbmods]

Heya, Haitashi.

I've got Safari 3.0.3 on an Intel Mac.

Let me know what version and platform you're running so I can submit a bug report to Apple.

[Haitashi]

Win XP with Safari 3.0.3

Also, if you see the examples. I'm only using the example called "Non-AJAX Balloon" and it works fine. Maybe the other examples don't work correctly.

Nobody knows how to achieve what I'm looking for? :(

[gits]

hi ...

should the text look like a link or just simple text? the idea is to extend the HelpBallons-Class so that we may put in an additional text that is displayed right behind the info-icon. we create a node from it and attach the same event-handler to it as the icon gets attached ...

kind regards

[Haitashi]

Heya ^_^

It doesn't necessarily have to look like a link because it's going to be located in a place where the users will know it's a "clickable" item. If it's easier to use what looks like simple text, even better.

What you say makes sense. Only thing is that I'm a Javascript noob so I don't know how to code what you just said.

[Haitashi]

I saw how to do this! ^_^

All you have to do is call it like this:

[HTML]<script type="text/javascript">
var hb1 = new HelpBalloon({
title: 'Non-Ajax Balloon',
content: 'This is where we can display the profile content.'
});
</script>
<a href="##" onclick="hb1.show();>Some text</a>[/HTML]

[gm04030276]

If you know any php, you could use the GD library and a wee bit of php to create an image dynamically? or even just create an image of text in photoshop or whatever?! or if you want to learn do what he said ^ up there!

[acoder]

Please use code tags when posting code:

[CODE=javascript]
JavaScript code goes here.
[/code]