Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php]Nie wiem jak napisać skrypt
Forum PHP.pl > Forum > Przedszkole
zen
30.09.2006, 08:24:47
Witam!

Proszę Was o radę i ewentualne wskazówki jak napisać taki skrypt:

W oknie przęglądarki wyświetlane są pola (kwadraty) coś jak siatka
po najechaniu kursorem komórka się podświetla, klikasz i przenosi cię
do formularza gdzie pokazuje współrzędne zaznaczonego wcześniej kwadrata.


Kompletnie nie wiem jak się do tego zabrać.

Czy moglibyście przedstawić swoje pomysły na ten temat?

Pozdrawiam
myth
30.09.2006, 08:55:09
Plik: index.php
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $kwadrat = 5; // 5x5
  4. echo '<table border="1" cellspacing="0" cellpadding="0">';
  5. for($y = 1;$y<=$kwadrat;$y++)
  6. {
  7. echo '<tr>';
  8. 	for($x = 1;$x<=$kwadrat;$x++)
  9. 	{
  10. 	echo '<td width="30" height="30"><a href="index.php?x='.$x.'&y='.$y.'">'.$x.':'.$y.'</a></td>';
  11. 	}
  12. echo '</tr>';
  13. }
  14. echo '</table>';
  15.  
  16.  
  17. if (isset($_GET['x']) && isset($_GET['y']))
  18. {
  19. 	echo '<strong>X: '.$_GET["x"].'</strong><br />';
  20. 	echo '<strong>Y: '.$_GET["y"].'</strong><br />';
  21. }
  22. ?>
[PHP] pobierz, plaintext


Jesli chodzi o podswietlanie to albo uzyj CSS'a albo JS'a onMouseOver.

Wyglada to tak: http://star.el.pcz.czest.pl/~myth/php/siatka.php
zen
3.10.2006, 13:45:16
Mam jeszcze takie pytanie.

W jaki sposób mogę do tego skryptu "dorobić" zeby mozna było zaznaczyć parę pól a dopiero póżniej przesłać go dalej do formularza.
Skrypt ma byc podobny do tego po zalogowaniu i po kliknięciu w panelu administracyjnym na kup pixele wyswietlana jest siatka z mozliwoscią zaznaczania wielu pól, nastepnie klikamy kup i przenosi nas do formularza gdzie wyświetlana jest liczba zaznaczonych pól kwota opis link i upload obrazka z dysku.

Nie wiem jak się do tego zabrać...

Bardzo proszę o pomoc.

Strona jest pod tym adresem

a to kod

index.php

[XML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <LINK REL="SHORTCUT ICON" HREF="ikona.gif">
  6. <title>Okienka.net -- reklama w internecie</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  8. <style type="text/css">
  9. <!--
  10. td#bg_r2_c1 { background-image:url(layout_r2_c1.jpg); background-repeat:no-repeat;}
  11. .fbg {font-family:Arial, Helvetica, sans-serif; font-size:smaller; text-decoration:none;}
  12. td#bg_r4_c1 { background-image:url(layout_r4_c1.jpg); background-repeat:no-repeat;}
  13. .footext { font-family:Arial, Helvetica, sans-serif; font-size: 9px; text-decoration: none; }
  14. a#link:link{ color: #999999; font-size:9px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  15. a#link:visited{color: #999999; font-size:9px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  16. a#link:hover{color: #FFFF00; font-size:9px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; text-align:center;}
  17. td#ramka {border-style: solid; border-color: #000000; border-width: 1px;}
  18. a#menu:link{ color: #000000; font-size:12px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  19. a#menu:visited{ color: #000000; font-size:12px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  20. a#menu:hover{ color: #FF0000; font-size:12px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  21.  
  22.  .podswietlona{background-color:red;font-weight:bold;
  23.     color:white;}
  24.  .zaznaczona{background-color:blue;font-weight:bold;
  25.    color:yellow;}
  26.  .normalna{background-color:inherit;}
  27. -->
  28. </style>
  29.  
  30. <style>
  31.  .podswietlona{background-color:red;font-weight:bold;
  32.     color:white;}
  33.  .zaznaczona{background-color:blue;font-weight:bold;
  34.    color:yellow;}
  35.  .normalna{background-color:inherit;}
  36.  </style>
  37.  
  38.  <script type="text/javascript">
  39.  function podswWiersze(id){
  40.    if(!document.getElementById)return;
  41.    // id - id elementu TABLE
  42.    // zainicjowanie zmiennych
  43.   // E - pobranie elementu tabeli 
  44.    // i - zmienna - licznik, potrzebna w pętli for
  45.    var i,E=document.getElementById(id),tr;
  46.    // jeśli tabela o podanym id nie istnieje
  47.    // instrukcje nie zostaną wykonane
  48.    if(E&&E.tagName=='TABLE'){
  49.      // pobranie wszystkich komórek TD tabeli
  50.      tr=E.getElementsByTagName('TD');
  51.      // pętla w której do zdarzeń onmouseover i onmouseout
  52.      // każdej komórki przypisane zostają funkcje realizujące 
  53.      // podświetlanie
  54.      for(i=0;i<tr.length;i++){
  55.        tr[i].onmouseover=function(){
  56.          // po wystąpieniu zdarzenia onmouseover
  57.          // klasa CSS wiersza zostanie zmieniona na 
  58.         // 'podswietlona', lecz tylko jeśli wiersz nie jest 
  59.          // zaznaczony 
  60.          if(this.className!='zaznaczona')
  61.            this.className='podswietlona';
  62.        }
  63.        tr[i].onmouseout=function(){
  64.          // przywrócenie normalnego stanu wiersza
  65.          if(this.className!='zaznaczona')
  66.            this.className='normalna';
  67.        }
  68.        // zaznaczanie wierszy
  69.        tr[i].onmousedown=function(){
  70.          // jeśli wiersz jest już zaznaczony, to jest 
  71.          // odznaczany, w przeciwnym wypadku zostaje zaznaczony
  72.          this.className=
  73.            this.className=='zaznaczona'?'normalna':'zaznaczona';
  74.        }
  75.      }
  76.   }
  77.  }
  78.  </script>
  79. </head>
  80.  
  81. <body bgcolor="#ffffff" onload="podswWiersze('tab')">
  82. <table border="0" cellpadding="0" cellspacing="0" width="995">
  83.  
  84.   <tr>
  85.    <td><img src="spacer.gif" width="995" height="1" border="0" alt="</span>"></td>
  86.    <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  87.   </tr>
  88.  
  89.   <tr>
  90.    <td><img name="layout_r1_c1" src="layout_r1_c1.jpg" width="995" height="40" border="0" alt=""></td>
  91.    <td><img src="spacer.gif" width="1" height="40" border="0" alt=""></td>
  92.   </tr>
  93.   <tr>
  94.    <td width="995" height="25" id="bg_r2_c1">
  95.   <!-- -->
  96.                                  <table width="995" border="0" cellspacing="0" cellpadding="0">
  97.                                 <tr>
  98.                                     <td width="400"> </td>
  99.                                     <td>
  100. <!-- -->
  101. <?php include("menutop.inc.html"); ?>
  102.       <!-- -->                              
  103.                                     </td>
  104.                                     <td width="100"> </td>
  105.                                 </tr>
  106.                               </table>
  107. <!-- -->
  108.  
  109.    
  110.    </td>
  111.    <td><img src="spacer.gif" width="1" height="25" border="0" alt=""></td>
  112.   </tr>
  113.   <tr>
  114.    <td width="995" height="635" >
  115.    <!-- -->
  116.    
  117.    <?php 
  118.    $kwadrat = 82; // 82x82
  119. echo '<table id="tab"  align="center" border="1" cellspacing="0" cellpadding="0">';
  120. for($y = 1;$y<=$kwadrat;$y++){
  121. echo '<tr>';
  122.     for($x = 1;$x<=$kwadrat;$x++)
  123.     {    echo '<td width="10" height="10" id="bg"> 
  124. <a  href="#select.php?x='.$x.'&y='.$y.'" ><img src="bg.jpg" border=0></img></a></td>';    }
  125. echo '</tr>';}
  126. echo '</table>';
  127.  
  128.    ?>
  129.    
  130.    <!-- -->
  131.    </td>
  132.    <td><img src="spacer.gif" width="1" height="635" border="0" alt=""></td>
  133.   </tr>
  134.   <tr>
  135.    <td width="995" height="200" id="bg_r4_c1">
  136.    <!-- -->
  137.                                           <table width="995" border="0" cellspacing="0" cellpadding="0">
  138.                                             <tr>
  139.                                                 <td align="center" width="995" height="100">
  140.       <!-- -->                                                
  141.                   <?php include("link.html"); ?>
  142.                               
  143.                                                 
  144.                                                 </td>
  145.                                             </tr>
  146.                                             <tr>
  147.                                                 <td id="ramka" align="center" width="995" height="50"><p class="footext">Redakcja nie odpowiada za serwisy które sie tu reklamuja.<br>
  148.                                                 Grafika i teksty naleza do ich autorów i sa chronione prawami autorskimi.</p></td>
  149.                                             </tr>
  150.                                             
  151.                                             <tr>
  152.                                             
  153.                                                 <td align="center" width="995" height="50"><p class="footext">CopywrightŠ okienka.net</p></td>
  154.                                             </tr>
  155.                                           </table>
  156.    
  157.    <!-- -->
  158.    
  159.    </td>
  160.    <td><img src="spacer.gif" width="1" height="100" border="0" alt=""><[color=blue]/td>
  161.   </tr>
  162. </table>
  163. </body>
  164. </html>
[XML] pobierz, plaintext



select.php

[XML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <LINK REL="SHORTCUT ICON" HREF="ikona.gif">
  6. <title>Okienka.net -- reklama w internecie</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  8. <link href="arkusz.css" rel="stylesheet" type="text/css">
  9. </head>
  10. <body>
  11.  
  12. <table border="0" cellpadding="0" cellspacing="0" width="995">
  13.   <!-- fwtable fwsrc="layout.png" fwbase="layout.jpg" fwstyle="Dreamweaver" fwdocid = "408327228" fwnested="0" -->
  14.   <tr>
  15.     <td><img src="spacer.gif" width="995" height="1" border="0" alt="[/color]"></td>
  16.     <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  17.   </tr>
  18.   <tr>
  19.     <td><img name="layout_r1_c1" src="layout_r1_c1.jpg" width="995" height="40" border="0" alt=""></td>
  20.     <td><img src="spacer.gif" width="1" height="40" border="0" alt=""></td>
  21.   </tr>
  22.   <tr>
  23.     <td width="995" height="25" id="bg_r2_c1">
  24.       <!-- -->
  25.       <table width="995" border="0" cellspacing="0" cellpadding="0">
  26.         <tr>
  27.           <td width="400"> </td>
  28.           <td>
  29.             <!-- -->
  30.             <?php include("menutop.inc.html"); ?>
  31.             <!-- -->
  32.           </td>
  33.           <td width="100"> </td>
  34.         </tr>
  35.       </table>
  36.       <!-- -->
  37.     </td>
  38.     <td><img src="spacer.gif" width="1" height="25" border="0" alt=""></td>
  39.   </tr>
  40.   <tr>
  41.     <td width="995" height="635" class="formbg">
  42.       
  43.       <!-- -->
  44.         <?php
  45. $zx =$_GET['x'];
  46. $zy =$_GET['y'];
  47.  
  48.  
  49. ?>
  50.                                     <table class="rampos" width="995" border="0" cellpadding="0" cellspacing="0">
  51.                                       <tr>
  52.                                           <td width="600"> </td>
  53.                                           <td>
  54.             <!-- -->
  55.             <?php include("form.inc.php"); ?>
  56.                                           
  57.             <!-- -->                              
  58.                                           </td>
  59.                                           <td width="600"> </td>
  60.                                       </tr>
  61.                                     </table>
  62.  
  63.  
  64.       <!-- -->
  65.     </td>
  66.     <td><img src="spacer.gif" width="1" height="635" border="0" alt=""></td>
  67.   </tr>
  68.   <tr>
  69.     <td width="995" height="200" id="bg_r4_c1">
  70.       <!-- -->
  71.       <table width="995" border="0" cellspacing="0" cellpadding="0">
  72.         <tr>
  73.           <td align="center" width="995" height="100">
  74.             <!-- -->
  75.             <?php include("link.html"); ?>
  76.                   </td>
  77.         </tr>
  78.         <tr>
  79.           <td id="ramka" align="center" width="995" height="50"><p class="footext">Redakcja nie odpowiada za serwisy które sie tu reklamuja.<br>
  80.               Grafika i teksty naleza do ich autorów i sa chronione prawami autorskimi.</p></td>
  81.         </tr>
  82.         <tr>
  83.           <td align="center" width="995" height="50"><p class="footext">CopywrightŠ okienka.net</p></td>
  84.         </tr>
  85.       </table>
  86.       <!-- -->
  87.     </td>
  88.     <td><img src="spacer.gif" width="1" height="100" border="0" alt=""><<span style='color:blue'>/td>
  89.   </tr>
  90. </table>
  91. </body>
  92. </html>
[XML] pobierz, plaintext





link.html form.inc.php nie wstawiam

menutop.inc.php i css też nie



Nie wiem gdzie robię błąd
i jak się do tego zabrac

Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.