Solved

How have they made this?!

Posted on 2006-06-18
4
235 Views
Last Modified: 2006-11-18
I am just curious to how this website:

http://www.newgrounds.com/portal/

has got like a little popup table when you role over every row in the table to display the score of the flash,

can somebody give me a couple of links to tutorials??

i wana no! thanks.
0
Comment
Question by:cookiejest
4 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 16929341
Where is the table? What link do I click at that site to get to the part you're talking about?
0
 
LVL 15

Accepted Solution

by:
bpmurray earned 60 total points
ID: 16929349
Each of the entries is a table cell that contains a link. When you move the mouse over the entry, it fires the onMouseOver event, and when you move the mouse away, it (obviously enough) fires the onMouseOut event. The page executes a piece of code for these events, so you have (looking at the first one):

    <a href="/portal/view/319383"
                   onMouseover="ShowDetails('Mr_br_kill', '?', '2,755Kb', 'Suitable For All', 'mr1');"
                   onMouseout="RemoveDetails('mr1');">
              Zelda&quot;s a bad bad girl
     </a>

So you can see "Zelda's a bad bad girl" is the text of the link and when you click on it it'll call the URL /portal/view/319383. When you move the mouse over, it executes the JavaScript function "ShowDetails" and when you move the moust away, it runs "RemoveDetails". I haven't looked at these javascripts, but if you look at more of the detail, it has actually the following structure in each table cell:
              <td width="100%" class="font_tahari_small" background="/portal/layout04/key_bg_gray.gif">
                    <div id="mr1" style="position:absolute;"></div>
                    <a href="/portal/view/319383" onMouseover="ShowDetails('Mr_br_kill', '?', '2,755Kb', 'Suitable For All', 'mr1');" onMouseout="RemoveDetails('mr1');">Zelda&quot;s a bad bad girl</a>
              </td>

The interesting part is the <div> since that's used to hold the popup. The signature of the calls are:
      ShowDetails(authorname, score, size, rating, div-ID> and
      RemoveDetails(div-ID)

There are some great sites for JavaScript and CSS tutorials - http://www.w3schools.com is pretty good.

There are other sites that go even further, and they use XmlHttpRequest to retrieve the data that pops up, but I think you should learn to walk before you run.
0
 
LVL 4

Assisted Solution

by:John-Bayles
John-Bayles earned 60 total points
ID: 16929388
<tr>
<td><img src="/portal/layout04/icon_movie.gif" width="12" height="14"></td>
<td align="center" class="font_arial_leftpane">29.</td>
<td width="100%" class="font_tahari_small"><div id="mr29" style="position:absolute;"></div><a href="/portal/view/319327" onMouseover="ShowDetails('Leonardo Campasso', '2.23/5.00', '630Kb', 'Suitable For All', 'mr29');" onMouseout="RemoveDetails('mr29');">Kill Billy</a></td>
</tr>


This is the key section of code:
onMouseover="ShowDetails('Leonardo Campasso', '2.23/5.00', '630Kb', 'Suitable For All', 'mr29');" onMouseout="RemoveDetails('mr29')

tutorial explaining this:
http://www.htmlcodetutorial.com/linking/_A_onMouseOver.html

0
 

Author Comment

by:cookiejest
ID: 16929661
thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Grunt No Clean Targets 6 100
FTP File permissions 1 43
How do I spruce up these 2 tables and make them totally different? 7 69
Best practice for a landing page 3 38
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now