How'd they do that? (Cool Mouseover balloons)

Anthony Morris · Jul 27, 2004

1) Visit the site: http://www.alexa.com/data/details/?url=google.com
2) Now move your mouse over one of the links marked "Site Info" under
the section labeled "People who visit this page also visit:"
3) Observe the cool balloon that appears with an mini-webpage
4) Explain or provide example/links to tutorials I can use to
understand how to do the same thing

Thanks!
Anthony

Randy Webb · Jul 27, 2004

Anthony said:
1) Visit the site: http://www.alexa.com/data/details/?url=google.com
2) Now move your mouse over one of the links marked "Site Info" under
the section labeled "People who visit this page also visit:"
3) Observe the cool balloon that appears with an mini-webpage

No "cool balloon" for me.

Thomas 'PointedEars' Lahn · Jul 27, 2004

Anthony said:
1) Visit the site: http://www.alexa.com/data/details/?url=google.com
2) Now move your mouse over one of the links marked "Site Info" under
the section labeled "People who visit this page also visit:"
3) Observe the cool balloon that appears with an mini-webpage

No "cool baloon" in my Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6)
Gecko/20040614 Firefox/0.8 and Konqueror 3.2.2 (KDE 3.2.3), but I get
a bunch of warnings in Firefox's JavaScript Console.

4) Explain or provide example/links to tutorials I can use to
understand how to do the same thing

View the Source, Luke.

PointedEars

Harag · Jul 28, 2004

1) Visit the site: http://www.alexa.com/data/details/?url=google.com
2) Now move your mouse over one of the links marked "Site Info" under
the section labeled "People who visit this page also visit:"
3) Observe the cool balloon that appears with an mini-webpage

I get the "Cool Balloon" on Windows 2K - IE6 but no ballon on NS 7.1

4) Explain or provide example/links to tutorials I can use to
understand how to do the same thing

The best way I found to learn is to look at other peoples source...

View the source and search for "Site Info"

You will see that in the <a> element for it they have a isRollover
attribute. for the <a> element before that they have a isData
attribute.

Now loot at the top of the souce and view all the <script> files that
were included:

http://client.alexa.com/common/js/search_functions.js
http://client.alexa.com/common/js/enum.js
http://client.alexa.com/common/js/xml.js
http://client.alexa.com/common/js/behavior.js

Next check the <body> tag... see the onLoad="blah"... well check out
that function in one of the above files (enum.js)

HTH.

Good Luck.

Harag · Jul 28, 2004

1) Visit the site: http://www.alexa.com/data/details/?url=google.com
2) Now move your mouse over one of the links marked "Site Info" under
the section labeled "People who visit this page also visit:"
3) Observe the cool balloon that appears with an mini-webpage
4) Explain or provide example/links to tutorials I can use to
understand how to do the same thing

Thanks!
Anthony

check out the following:

http://www.bosrup.com/web/overlib/

HTH
Al

Grant Wagner · Jul 28, 2004

Harag said:
The best way I found to learn is to look at other peoples source...

View the source and search for "Site Info"

Except when the script only appears to work in one browser, in which case
you should start looking elsewhere for similar functionality written by
someone who understands how to make it work on more then a single browser.

Harag · Jul 28, 2004

Except when the script only appears to work in one browser, in which case
you should start looking elsewhere for similar functionality written by
someone who understands how to make it work on more then a single browser.

lol, yea I couldn't agree more now I've looked through the code for
this site a bit more.

But its a good step in learning by taking someone elses 1 browser code
and trying to change it for multi browsers.

AL.

Top Drop Down Menu for IE that can overlay IE combo box and has fading effect	2	Jul 18, 2004
Squeak Box	1	Jan 7, 2004
FAQ update (roundup of pending requests - for comment)	6	Jan 6, 2004
Asp.net Important Topics.	0	Jan 18, 2007
Accessibility of Docs on Win32: Navigation, Names and PyDoc	0	Oct 6, 2005
ISC'2005 Industrial Simulation Conference, Berlin June 2005, CFP	0	Nov 19, 2004
comp.lang.c Changes to Answers to Frequently Asked Questions (FAQ)	1	Jul 3, 2004
comp.lang.c Answers to Frequently Asked Questions (FAQ List)	15	Apr 1, 2006

How'd they do that? (Cool Mouseover balloons)

Anthony Morris

Randy Webb

Thomas 'PointedEars' Lahn

Harag

Harag

Grant Wagner

Harag

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads