Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Odnosnik Obrazkowy
Forum PHP.pl > Forum > Przedszkole
Suule
2.02.2009, 20:23:08
Witam...
Stworzylem sobie mini gre w php, mysql i js, ale mam problemik z mapka miasta, a mianowicie, wszystko dziala pieknie dopoki na mapce nima obiektow smile.gif.
Czyli mamy pusta mapke, po najechaniu na pole gdzie ma byc budynek, wyswietla nam go z informacjami. (po odjechaniu myszka, budynek i informacje znikaja)
Ale problem pojawia sie gdy chce by budynek poprostu stal, a po najechaniu na niego pojawialy sie jego dane itp. ( czyli gdy zostanie wybudowany).
Nie jestem zbyt mocny w js, wiec gdy wczytalem obrazek w miejsce "area shape" to zakrywalo mi "shape".

Kod wyglada tak:
[PHP] pobierz, plaintext 
  1. <?php
  2. function showstatus(name)
  3. {
  4.     document.getElementById(name).style.display = '';
  5.     document.getElementById(name + '_status').style.display = '';
  6. }
  7.  
  8. function hidestatus(name)
  9. {
  10.     document.getElementById(name).style.display = 'none';
  11.     document.getElementById(name + '_status').style.display = 'none';
  12. }
  13.  
  14. function preload_images()
  15. {
  16.     document.preload = new Array();
  17.  
  18.     if(document.images)
  19.     {
  20.         for(var i = 0; i < preload_images.arguments.length; i++)
  21.         {
  22.             document.preload[i] = new Image();
  23.             document.preload[i].src = preload_images.arguments[i];
  24.         }
  25.     }
  26. }
  27. ?>
[PHP] pobierz, plaintext


Kod glowny:
[PHP] pobierz, plaintext 
  1. <?php
  2. <style type="text/css">
  3. body { margin:0px;}
  4. body, td, div, p, li { font-family: Tahoma, verdana, arial, helvetica, sans-serif; font-size:11px; color:#000000; }
  5. #glowny { position:absolute; top:140px; left:250px;}
  6. #swiatynia { position:absolute; } 
  7. #magazyn {position:absolute; }
  8. #mlyn {position:absolute; }
  9. #ratusz {position:absolute;}
  10. .status { position:absolute; width:140px; min-height:15px; z-index:5; border:1px solid black; background-color:#FFFFFF; opacity: .7; filter: alpha(opacity=70);}
  11. #select { position:absolute; width:100%; height:30px; z-index:0; top:0px; left:0px; }
  12.  
  13. #swiatynia_status { top:250px; left:45px; }
  14. #magazyn_status { top:300px; left:120px;}
  15. #mlyn_status {top:160px; left:270px;}
  16. #ratusz_status {top:220px; left:200px;}
  17.  
  18. #swiatynia { top:160px; left:90px; width:60px; height:72px; }
  19. #magazyn {top:255px; left:260px; width:60px; height:71px; }
  20. #mlyn {top:100px; left:400px;}
  21. #ratusz {top:140px; left:250px;}
  22. </style>
  23. <script src="funkcje.js" type="text/javascript" > </script>
  24. </head> 
  25.  
  26. <body> 
  27.  
  28. <img src="image/wioska/ratusz.gif" id="glowny"  />
  29. <div style=" position:absolute;">
  30.     <img src="image/wioska/wioska.jpg" width="520" height="381" alt="wioska" border="0" usemap="#wioska">
  31.     
  32.          <map name="wioska">
  33.              <area shape="rect" coords="100,160,150,200" href="" alt="" title="Kopalnia Zlota" onmouseover="showstatus('swiatynia');" onmouseout="hidestatus('swiatynia');">
  34.              <area shape="rect" coords="300,260,230,300" href="" alt="" title="magazyn" onmouseover="showstatus('magazyn');" onmouseout="hidestatus('magazyn');">
  35.              <area shape="rect" coords="400,180,450,130" href="" alt="" title="mlyn" onmouseover="showstatus('mlyn');" onmouseout="hidestatus('mlyn');">
  36.              <area shape="rect" coords="250,220,330,160" href="" alt="" title="ratusz" onmouseover="showstatus('ratusz');" onmouseout="hidestatus('ratusz');"  >
  37.          </map>
  38.  
  39. <img src="image/wioska/swiatynia.gif" id="swiatynia" border="0" alt="" style="display:none;" onmouseover="showstatus('swiatynia');" onmouseout="hidestatus('swiatynia');">
  40. <img src="image/wioska/magazyn.gif" id="magazyn" border="0" alt="" style="display:none;" onmouseover="showstatus('magazyn');" onmouseout="hidestatus('magazyn');">
  41. <img src="image/wioska/mlyn.gif" id="mlyn" border="0" alt="" style="display:none;" onmouseover="showstatus('mlyn');" onmouseout="hidestatus('mlyn');">    
  42. <img src="image/wioska/ratusz.gif" id="ratusz" border="0" alt="" style="display:none;" onmouseover="showstatus('ratusz');" onmouseout="hidestatus('ratusz');">    
  43.  
  44.     
  45.     <div id="swiatynia_status" class="status" style="display:none;" onmouseover="showstatus('swiatynia');" onmouseout="hidestatus('swiatynia');">
  46.         <table border="0" cellpadding="3" cellspacing="1" width="100%">
  47.  
  48.             <tr><td align="center"><b>Swiatynia</b></td></tr>
  49.             <tr><td><b>Poziom:</b> 0</td></tr>
  50.             <tr> <td> <b>Koszt: </b> </td> </tr>
  51.             </table>
  52.     </div>
  53.     
  54.         <div id="magazyn_status" class="status" style="display:none;" onmouseover="showstatus('magazyn');" onmouseout="hidestatus('magazyn');">
  55.         <table border="0" cellpadding="3" cellspacing="1" width="100%">
  56.  
  57.             <tr><td align="center"><b>Magazyn</b></td></tr>
  58.             <tr><td><b>Poziom:</b> 0</td></tr>
  59.             <tr> <td> <b>Koszt: </b> </td> </tr>
  60.             </table>
  61.     </div>
  62.  
  63.           <div id="mlyn_status" class="status" style="display:none;" onmouseover="showstatus('mlyn');" onmouseout="hidestatus('mlyn');">
  64.         <table border="0" cellpadding="3" cellspacing="1" width="100%">
  65.  
  66.             <tr><td align="center"><b>Mlyn</b></td></tr>
  67.             <tr><td><b>Poziom:</b> 0</td></tr>
  68.             <tr> <td> <b>Koszt: </b> </td> </tr>
  69.             </table>
  70.     </div>
  71.     
  72.     <div id="ratusz_status" class="status" style="display:none;" onmouseover="showstatus('ratusz');" onmouseout="hidestatus('ratusz');">
  73.         <table border="0" cellpadding="3" cellspacing="1" width="100%">
  74.  
  75.             <tr><td align="center"><b>Ratusz</b></td></tr>
  76.             <tr><td><b>Poziom:</b> 0</td></tr>
  77.             <tr> <td> <b>Koszt: </b> </td> </tr>
  78.             </table>
  79.     </div>
  80. </div>
  81. ?>
[PHP] pobierz, plaintext


Pozbawilem kod wszystkiego co nie jest potrzebne tongue.gif
lord_t
2.02.2009, 23:30:44
Cytat(Suule @ 2.02.2009, 20:23:08 ) *
Ale problem pojawia się gdy chce by budynek po prostu stał, a po najechaniu na niego pojawialy sie jego dane itp. ( czyli gdy zostanie wybudowany).
Nie jestem zbyt mocny w js, wiec gdy wczytałem obrazek w miejsce "area" to zakrywało mi "shape".

Nie do końca kapuje:
-jak go wczytałeś w miejsce area?
-(odnosnie pierwszego zdania) Jaki problem?
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.