Im building a leauge system in PHP. It started out as a 1vs1 system and got that working as i wanted. Now im expanding it to handle team setups (2v2 and 3v3), so i need some pointers as how to handle what i want to do.

When a match has been registred with the results, map played, civ used for each player etc i want to display this info in my round/brackets list. For 1vs1 my current setup is good enough, but when the system is setup for teams it will be alot more info to display so i figured it would look better if this info gets displayed in another "window"/box when the user mouse cursor goes over the match line. Ive figured that i prolly need to use (and learn) javascript for this, with onmouseover and onmouseout functions. What i want to do is something simular to this site: http://bf2s.com/player/43766267/ when your mouse cursor goes over the awards pictures on the bottom of the page.

You can find my league system on http://crowsnest.kicks-ass.net/test (its on my home connection, so its not that fast). Click the Brackets/Rounds to see the area i want to improve.

So do anyone have some good reading material and tips (what functions etc) on how to achieve this ?

This is the php script part i want to expand.

$type=mysql_fetch_row(mysql_query("SELECT type FROM NHAP_setup WHERE id=1",$link));
        if ($type[0]!="1 vs 1")
          // team setup
          $query=sprintf("SELECT round,team1 player1,team2 player2,civp1,civp2,map,winner,recgame,regby FROM NHAP_rounds 
                          WHERE round=%d ORDER BY round,pair,team1",mysql_real_escape_string($_GET['round']));        
else
// single player setup $query=sprintf("SELECT round,player1,player2,civp1,civp2,map,winner,recgame,regby FROM NHAP_rounds WHERE round=%d ORDER BY round,pair,player1",mysql_real_escape_string($_GET['round'])); $result=mysql_query($query,$link); $i=1; while ($row=mysql_fetch_assoc($result)) { // unplayed matches if ($row['winner']==NULL) { if (!($i&1)) // check for even or odd numbers echo "<tr class=\"altbg2\">\n"; else echo "<tr class=\"altbg1\">\n"; echo "<td colspan=\"".$r."\">".$row['player1']." <b>vs</b> ".$row['player2']."</td>\n</tr>\n"; } // played matches, results exists else { if (!($i&1)) // check for even or odd numbers, for different bg-colors echo "<tr class=\"altbg2\">\n"; else echo "<tr class=\"altbg1\">\n"; echo "<td colspan=\"".$r."\"><b>".$row['player1']; // build up the text for a finished match if ($row['winner']==$row['player1']) { echo " (W)"; } echo " (".$row['civp1'].") vs ".$row['player2']; if ($row['winner']==$row['player2']) { echo " (W)"; } echo " (".$row['civp2'].") (Map:&nbsp;".$row['map'].")&nbsp;"; if ($row['regby']=='admin') { echo "&nbsp;<i>*Admin loss*</i>"; } else { if (stripos($row['recgame'],".age3rec")!=NULL) echo "<a href=\"upload/".$row['recgame']."\">(rec game)</a>"; } // finished match text finished echo "</b></td>\n</tr>\n"; } $i++; }

    Hi Crowly ...

    I looked at that bf2s.com link that your provided. There are two ways to doing this.
    First is to actually embed all the information for the boxes right in the page and make them invisible. When the user 'hovers' on the particular link/region, you can make the corresponding information visible.

    The second way to doing that is to fetch the information 'on demand' as opposed to putting all of them in the html page. So your html page will contain all that the necessary information for the right display after it's loaded. In addition, you could also define containers for objects that you would load 'on demand'. For example, if you were building something like bf2s.com, you can define the html for the boxes right there in the page. However, you won't have any of the content that goes into the boxes at this time.

    Now in the onmouseover and mouseout functions, you can make a http connection in the background to a php script that will return the content for that particular item. Then you can put the content in the box and then display it. Remember that the page will not reload, it's just that the connection is in the background. This technique is what is popularly known as AJAX.

    So in order to figure out how to do what you want, and to come up with the right strategy - you need to learn

    • Document Object Model, and CSS
    • Javascript
    • AJAX (if you know the above two, basic AJAX techniques that are good enough for what you are seeking to do can be learnt in 15 minutes)

    Hope this is of some use ..

    Good Luck!

      Thanks ill go "hit the books" 🙂

        I went a for a "light version" instead by calling these JS functions on "onmousedown" and "onmouseout":

        
          function show_pl(string,p1,civp1,p2,civp2,p3,civp3,p4,civp4,p5,civp5,p6,civp6,num,id)
          {
            var str='<table class="jsd">'
            str=str+'<tr><td class="jsh" colspan="2">'+string+'</td></tr>'
            str=str+'<tr><td class="js">'+p1+'&nbsp;&nbsp;'+civp1+'</td><td class="js">'+p4+'&nbsp;&nbsp;'+civp4+'</td></tr>'
            str=str+'<tr><td class="js">'+p2+'&nbsp;&nbsp;'+civp2+'</td><td class="js">'+p5+'&nbsp;&nbsp;'+civp5+'</td></tr>'
            if (num==3)
            {
              str=str+'<tr><td class="js">'+p3+'&nbsp;&nbsp;'+civp3+'</td><td class="js">'+p6+'&nbsp;&nbsp;'+civp6+'</td></tr>'
            }
            str=str+'</table>'
            document.getElementById(id).innerHTML=str
          }
        
          function hide_pl(str,id)
          {
            document.getElementById(id).innerHTML='<b>'+str+'</b>'
          }
          Write a Reply...