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

A

Anthony Morris

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
 
T

Thomas 'PointedEars' Lahn

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
 
H

Harag

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.
 
G

Grant Wagner

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.
 
H

Harag

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top