Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS][PHP]mapa działek w svg, mapa w svg generowana za pomocą php tooltip i wyszukiwarka
gawar
post
Post #1





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 26.10.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Pyton_000
post
Post #2





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----

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)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 01:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn