Obrázková mapa s aktivními body

Peter

Obrázková mapa s aktivními body
« kdy: 16. 04. 2014, 15:54:45 »
Ahojte,

chcel by som sa spytat, mozno sa niekto uz stretol s podobnym problemom...

Mam bezny obrazok (je to mapa), na ktorom je vyznacena trasa s bodmi (cca 20 spolu).
Ten obrazok je zaroven umiestneny v ramci jednoduchej html stranky.
Tie body na obrazku by som chcel spravit aktivne a to tak, ze mam k nim tych cca. 20 nazvov, ktore
su hypertextove linky (za kazdym z nich mam ako odkaz html dokument s dalsimi informaciami)
a ked by som nabehol mysou na niektory nazov napr. c.3, tak ten konkretny bod c.3 v mape
by sa vysvietil/zmenil farbu a zaroven by to bol hypertextovy odkaz na ten isty nazov s konkretnym html dokumentom.
(Pripadne by stacilo, aby to v tej mape vysvietilo, keby to aj nebolo opacne hypertextovo aktivne).
Samozrejme nemam problem vytvorit bezny hypertextovy link, ale nedari sa mi to
vymysliet tak, ako som napisal vyssie, ze by mi pri nabehu mysou na text toho konkretneho nazvu vysvietilo
(napr. zvacsenim alebo zmenou farby alebo oboje) ten bod - kruzok v tej obrazkovej mape.

Co je ale dolezite, chcel by som to spravit formou beznej stranky ale len ako client-side, teda kompletne
offline vsetko by bolo interpretovane len na strane prehliadaca teda bez servera.

Hladal som, ale nejako sa mi zatial nepodarilo najst nejake uspokojive riesenie. Mozno by som potreboval
len nejako naviest, co by bolo najvhodnejsie pouzit v tomto pripade.

Dakujem za akekolvek napady, pomoc alebo informacie...
« Poslední změna: 17. 04. 2014, 11:50:12 od Petr Krčmář »


Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #1 kdy: 16. 04. 2014, 16:07:02 »
Pomocí SVG by ot mělo jít snadno, nastavíte těm bodům :hover styl stejně, jako se to dělá s odkazy v HTML. bez SVG byste si musel pomocí absolutního pozicování v CSS umístit nějaké prvky, a na nich třeba zase pomocí toho :hover provádět tu změnu.

Pavel...

Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #2 kdy: 16. 04. 2014, 16:10:43 »
ehm... co mate proti tagu "MAP" ?

example: http://www.netzgesta.de/mapper/

Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #3 kdy: 16. 04. 2014, 16:32:08 »
ehm... co mate proti tagu "MAP" ?
Jak se pomocí tagu map zařídí změna po přejetí myší?

example: http://www.netzgesta.de/mapper/
Hezký příklad na to SVG.

Pavel...

Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #4 kdy: 16. 04. 2014, 18:28:15 »
Jak se pomocí tagu map zařídí změna po přejetí myší?

onmouseover ?


Hezký příklad na to SVG.

ok, lepsi priklad :) http://lizarum.com/assignments/programming/javascript/2008/image_maps.html


Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #5 kdy: 16. 04. 2014, 18:35:03 »
onmouseover ?
To není pomocí tagu map, ale pomocí JavaScriptu. Navíc tím jen detekujete tu událost, ale ještě nějak musíte zajistit tu změnu zobrazení.

Pavel...

Re:obrazkova mapa s aktivnymi bodmi
« Odpověď #6 kdy: 16. 04. 2014, 18:42:59 »
To není pomocí tagu map, ale pomocí JavaScriptu. Navíc tím jen detekujete tu událost, ale ještě nějak musíte zajistit tu změnu zobrazení.

odpovedal som autorovi otazky, ze ako je normalne riesit jeho problem. Vyzeral na to, ze o nejakych klikatelnych mapach nema paru.
pouzitie onmouseover  informacia ktoru sa mi zdalo zbytocne rozvadzat, napokon myslim, ze to ide aj spravit cisto cez CSS.

pre pripad, ze to autorovi nestaci som dodal nahodny example od uja Googla, ktory robi to co chce.

Jenda

Re:Obrázková mapa s aktivními body
« Odpověď #7 kdy: 17. 04. 2014, 21:09:26 »
Nad obrázek bych absolutně napozicoval odkazy pomocí CSS a změnu řešil pomocí a:hover.

Jenda

Re:Obrázková mapa s aktivními body
« Odpověď #8 kdy: 17. 04. 2014, 21:10:19 »
Nad obrázek bych absolutně napozicoval odkazy pomocí CSS a změnu řešil pomocí a:hover.
Omlouvám se, asi jsem to špatně pochopil.

fdvgdsfsda

Re:Obrázková mapa s aktivními body
« Odpověď #9 kdy: 17. 04. 2014, 21:17:17 »
api4.mapy.cz

Peter

Re:Obrázková mapa s aktivními body
« Odpověď #10 kdy: 15. 05. 2014, 17:04:09 »
Ahojte,

chcem sa podakovat za vsetky komentare a pomoc, aj ked uz ubehol nejaky cas.
Len pre upresnenie: povodne som mal ten obrazok len v jpg, ale neskor sa mi podarilo dostat
ku svg a to uz bolo o moc lepsie. Zistil som pozicie bodov a od toho som sa dalej odvijal.
Na akciu som vyuzil :hover - ako bolo spomenute vyssie.
Robil som to nakoniec cele v css s vyuzitim niektorych funkcii html5.

Este raz velka vdaka za pomoc - navedenie na riesenie...