Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Graficzna mapa strony
foxbond
post 20.04.2010, 13:58:06
Post #1





Grupa: Zarejestrowani
Postów: 162
Pomógł: 12
Dołączył: 20.12.2009
Skąd: Siedlce

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


Chciałbym zrobić graficzną mapę strony.
Tzn. mapę na której byłyby lokacje z mojej gry

Przykład: (pochodzi z menelgame i jest we flashu, a ja wolałbym takie coś w html+css)
Screen

Edit: Może być też w innej technologii jak coś. Znalazłem jeszcze takie coś jednak to wyższa szkoła jazdy, takiego PRO rozwiązania nie potrzebuję



p

Ten post edytował foxbond 20.04.2010, 13:58:02
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
zegarek84
post 20.04.2010, 15:00:21
Post #2





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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


najprościej olinkować obrazek możesz przez znacznik map i znaczniki area, jednak jeśli chciałbyś podmieniać obrazki musiałbyś to oskryptować javascript (plus tutaj by był taki, iż dokładnie po krawędzi danego obrazka możesz obrysować linię linku, zaś minus, że nie będzie działało bez wyłączonego javascript)
http://www.kurshtml.boo.pl/html/odsylacz_o...,odsylacze.html - poczytaj tam niżej o tych znacznikach...

idąc jednak dalej i pozostawiając to w najprostszej postaci podmiana obrazków wyglądała by przez wypozycjonowanie drugiego na tej mapce ze zmienionymi kolorami/kształtami... więc to co dam dalej bez javascript co można zrobić też poczytaj winksmiley.jpg [niestety 2 pierwsze linki po angielsku ;/ - ale masz przykłady]
CSS Image Maps
Night of the Image Map

tutaj daję już polski link z wykorzystaniem jQuery ze znacznikami map i area (można samym javascript):
http://blog.desmart.com/2008/11/19/mapy-odsylaczy-a-mapy/

jak to przejrzysz i zrozumiesz to będziesz pozycjonował obrazki i linki jak tylko chcesz winksmiley.jpg...

jeszcze tylko napomnę o jednej technologi czyli SVG (jednak raczej Cię nie zainteresuje) i VML - jest w sieci skrypt który rysuje w zależności czy to normalna przeglądarka czy IE - nie musisz z tego korzystać jednak na link warto luknąć:
http://raphaeljs.com/ - luknij niżej w przykłady winksmiley.jpg

Ten post edytował zegarek84 20.04.2010, 15:00:43


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.

Go to the top of the page
+Quote Post
foxbond
post 20.04.2010, 20:35:48
Post #3





Grupa: Zarejestrowani
Postów: 162
Pomógł: 12
Dołączył: 20.12.2009
Skąd: Siedlce

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


Dzięki za odpowiedź, w szczególności przydadzą mi się linki 3 i 4.
Ostatni link - bardzo ciekawe w szczególności ten przykład.
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 21:48