Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]mapa działek w svg
Forum PHP.pl > Forum > Przedszkole
gawar
11.02.2015, 11:48:44
Witam, Od jakiegoś czasu borykam się z problemem stworzenia mapy działek (kwadraciki rozmieszczone według informacji z bazy danych). Mapa ta ma mieć charakter orientacyjny. Dane takie jak sektor, rząd i działkę pobieram sobie z bazy i w pętli przetwarzam tworząc dane svg. Po najechaniu na dany kwadracik wyświetla się info z parametru title, a po kliknięciu przenosi mnie do strony odpowiadającej danej działce. Chciałbym teraz to udoskonalić tak aby:
1. Po najechaniu na kwadracik oprócz informacji z title pojawiał się tooltip z miniaturką zdjęcia. Z tym jest problem, próbowałem zrobić według tego opisu dymek z podpowiedzią (drugi przykład) ale chyba nie mogę takiego kodu dołączyć do svg - wygląda na to, że taki kod nie jest obsługiwany. Oczywiście css zaimplementowałem do svg. problem jest z html. 
[HTML] pobierz, plaintext 
  1. $i='<a class="podpowiedz"
  2. title="Id miejsca='.$id_miejsce.' Numer rzędu='.$rzad.' Numer miejsca='.$miejsce.' "
  3. xlink:href=../../index.php?id=wyswietl_miejsce.php&id_miejsce='.$id_miejsce.'&rzad='.$rzad.'&miejsce='.$miejsce.' target="_blank">
  4. <span><img src="link.jpg" width="69px" height="69px"></span>
  5. <rect class="miejsce" id="id_miejsce.'.$id_miejsce.'"  x="'.$x.'" y="'.$y.'" width="'.$szerokosc.'" height="'.$wysokosc.'"  /></a>'. "\n"
[HTML] pobierz, plaintext

bez zawartości znacznika <span> mapa się generuje. Ale co zrobić żeby wyświetlił się tooltip? Chyba idę w złą strone.
tak wygląda wygenerowana mapa do pliku z rozszerzeniem php
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9. </head>
  10.  
  11.   <body>
  12.  
  13.   <style>
  14.  
  15.   .miejsce
  16.  
  17.   {
  18.  
  19.   fill: red;
  20.  
  21.   }
  22.  
  23.   .miejsce:hover
  24.  
  25.   {
  26.  
  27.     opacity: 0.5;
  28.  
  29.   }
  30.  
  31. </style>
  32.  
  33.     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  34.  
  35.     width="3000" height="3000">
  36.  
  37. <g
  38.  
  39.      inkscape:label="1"
  40.  
  41.      inkscape:groupmode="layer"
  42.  
  43.      id="1">
  44.  
  45. <a 
  46.  
  47. title="Id miejsca=1 Numer rzędu=1 Numer miejsca=1 "
  48.  
  49. xlink:href=../../index.php?id=wyswietl_miejsce.php&id_miejsce=1&rzad=1&miejsce=1& target="_blank">  
  50.  
  51. <rect class="miejsce" id="id_miejsce.1"  x="547" y="13" width="10" height="10"  /></a>
  52. <a 
  53.  
  54. title="Id miejsca=2 Numer rzędu=1 Numer miejsca=2"
  55.  
  56. xlink:href=../../index.php?id=wyswietl_miejsce.php&id_miejsce=2&rzad=1&miejsce=2 target="_blank">
  57.  
  58. <rect class="miejsce" id="id_miejsce.2"  x="534" y="13" width="10" height="10"  /></a>
  59. <a 
  60.  
  61. title="Id miejsca=3 Numer rzędu=1 Numer miejsca=3 "
  62.  
  63. xlink:href=../../index.php?id=wyswietl_miejsce.php&id_miejsce=3&rzad=1&miejsce=3 target="_blank">                          
  64.  
  65. <rect class="miejsce" id="id_miejsce.3"  x="521" y="13" width="10" height="10"  /></a>
  66. <a 
  67.  
  68. title="Id miejsca=4 Numer rzędu=1 Numer miejsca=4 "
  69.  
  70. xlink:href=../../index.php?id=wyswietl_miejsce.php&id_miejsce=4&rzad=1&miejsce=4 target="_blank">                             
  71.  
  72. <rect class="miejsce" id="id_miejsce.4"  x="508" y="13" width="10" height="10"  /></a>
  73.  
  74.  
  75. </g>
  76.  
  77. </svg>
  78.  
  79.   </body>
  80. </html>
[HTML] pobierz, plaintext


2. można było wyszukać daną działkę. Tzn. mam na przykład wyszukiwarkę i wyszukuję danego miejsca w bazie i chciałbym je teraz odpowiednio oznaczyć na mapie svg. Zmienić kolor czy zaznaczyć kółkiem. Tego kompletnie nie wiem jak ruszyć, jakimi sposobami można to zrobić. Tak aby kilka osób mogło wyszukiwać takie miejsca równocześnie.

Za wszelkie podpowiedzi co do sposobu rozwiązania problemu - dziękuje
Pyton_000
11.02.2015, 11:56:55
1. http://iamceege.github.io/tooltipster/#demos
2. Robisz inputa który będzie wyszukiwał np. po title.
W JS robisz onchange i przeszukujesz kontener z mapkami pod kątem title. Jak znajdzie to ustalasz jakiś style lub class wcześniej czyszcząc dla wszystkich (żeby nie dodawały się kolejne)
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.