Solved

How have they made this?!

Posted on 2006-06-18
4
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

630 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