Klikalna mapa oraz zaznaczenie punktu

[chuck]

Utworzyłem sobie mapę w HTML

<p><img src="" data-src="" usemap="#image-map" /> <map name="image-map">
<area title="" alt="" coords="292,33" shape="rect" href="/" target="" />
</map></p>

Zamist określonego obrzaru,chciałbym zaznaczyć okrelone punkty
Znalazłem coś podobnego tutaj:
http://en.wikigta.org/wiki/Weapons_Downtown_District_(GTA2)
ale nie wiem jak to zrobić u siebie.

[siristru]

Nie zrobisz tego przez znacznik "area" bo nie da się go stylizować.
Potrzebujesz nałożyć na obrazek div z position: absolute i z określeniem miejsca w pikselach.
Problem z takim rozwiązaniem jest brak responsywności - obrazek zmniejszy się na mniejszych monitorach a tym samym ustawione pozycjonowanie absolutne zdefiniowane w px się rozjedzie.

[terra]

Podajesz przykład i masz w nim odpowiedź. Mapa zbudowana jes z Div'ów osadzanych względem górnego lewego narożnika komórki tabeli. Punkty na mapie to animowane gify, które również osadzane są względem narożnika.
Responsywność można rozwiązać poprzez definicję reguły @media na różną rozdzielczość, a tym samym każdorazowe definiowanie własności position dla pozycjonowanego elementu.
Jeśli masz

<div id="nr1" style="position: relative; left: 0px; top: 0px; width: 0px; height: 0px; visibility: visible;">
to musisz zdefiniować wersje stylów DIV nr1 dla wszystkich rozdzielczości. W praktyce masz rozdzielczości desktop,tablet,komórka, czyli dla każdego DIVa musisz mieć 3 definicje tej samej pozycji DIV nr1 desktop | DIV nr1 tablet | DIV nr1 komórka.

W Twoim przykładzie jest ok 50 ramek div więc masz conajmniej 150 definicji stylów.

[siristru]

W Twoim przykładzie jest ok 50 ramek div więc masz co najmniej 150 definicji stylów.

Czemu tak skromnie? Tylko 50 x 3 :)

Używam jedynie:

@media only screen and (min-width:360px) {}
@media only screen and (min-width: 568px) {}
@media only screen and (min-width: 667px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 1224px) {}
@media only screen and (min-width: 1440px) {}

A możliwych jest o wiele więcej... no i nie przewidzisz każdego urządzenia.

Tylko w tym przykładzie mam7 50 x 7 = 350 :)

A możemy się bawić: http://responsivetesttool.com/

Ale nie wiem czy jest jednak jakiś inny sposób?

[terra]

Ale nie wiem czy jest jednak jakiś inny sposób? :) Właśnie.
Ale w tej chiwili pomyslałem, że można spróbować osadzić CSS w PHP i wartości px kalkulować automatycznie na podstawie danej rozdzielczości.

[siristru]

Ale w tej chiwili pomyslałem, że można spróbować osadzić CSS w PHP i wartości px kalkulować automatycznie na podstawie danej rozdzielczości.

To jest też rozwiązanie... ale czy to nie wymaga użycia CSS inline?

Może jeszcze próbować rozwiązać przez jQuery.

[terra]

To jest też rozwiązanie... ale czy to nie wymaga użycia CSS inline?
Nie - robimy sztuczkę w której plik style.css zamieniamy na style.php, a w środku osadzamy nagłówek

header("Content-type: text/css; charset: UTF-8");
i od tej pory grzejemy css w php :)

[siristru]

@terra: dobre, dobre

[chuck]

Widzę że temat rozwinął się w ciekawym kierunku.
Mozemy doprowadzíć go do końca.
Jak w PHP określać szerokość ekranu?

[siristru]

Ten php to faktycznie będzie CSS czyli stosujesz zwyczajne break points jak wypisałem tutaj: http://forum.joomla.pl/showthread.php?87169-Klikalna-mapa-oraz-zaznaczenie-punktu&p=385932&viewfull=1#post385932

[terra]

Widzę że temat rozwinął się w ciekawym kierunku.
Mozemy doprowadzíć go do końca.
Jak w PHP określać szerokość ekranu?
W php nie określasz szerokości ekranu, robisz to w CSS. Mozesz osadzić CSS w PHP, tak żeby zmienne PHP wykorzystywać jako parametry CSS.

[chuck]

Nie będę ukrywał,że nie znam się na CSS.
Skopiowałem CSS do pliku,ale strona nie jest responsywna.

Kod strony:


<tr>
<td colspan="2" style="padding:0px 0px 0px 0px">
<div id="MapPoints2122895395" class="MapPoints" style="position: relative; left: 0px; top: 0px; width: 768px; height: 768px; visibility: visible; background-color: white;"> <img name="myMap" style="position: absolute; top: 0pt; left: 0pt;" src="mapka_pliki/Downtown_satellite_map.png" width="768" height="768">
<div id="myMapPoints838395966" class="" style="position: relative; left: 0px; top: 0px; width: 0px; height: 0px; visibility: visible;">
<a title="Pistol"><img name="myMapPoints_" style="opacity: 1.0; position: absolute; top: 434.5px; left: 692.5px;" src="mapka_pliki/Oranjepulse.gif" alt=" Pistol " width="100" height="100"></a></div>
<div id="nr1" style="position: relative; left: 0px; top: 0px; width: 0px; height: 0px; visibility: visible;"></td></tr>
<tr>
<th style="background:orange;width:150px;text-align:right">Vehicles and pick ups
</th>
<script src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="images/imageMapResizer.min.js"></script>
<script type="text/javascript">

$('map').imageMapResize();

</script>




9845

[terra]

Rozumiem, że chcesz stworzyć coś atrakcyjnego, ale mierz siły na zamiary. Nie znasz css, to nasze podpowiedzi bedą niewielką pomocą. Musisz nadrobić zaległości z CSS, responsywności i PHP. Drugie rozwiązanie to zatrudnienie osoby która to zrobi dla Ciebie.