Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: Peter 16. 04. 2014, 15:54:45

Název: Obrázková mapa s aktivními body
Přispěvatel: Peter 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...
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Filip Jirsák 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.
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Pavel... 16. 04. 2014, 16:10:43
ehm... co mate proti tagu "MAP" ?

example: http://www.netzgesta.de/mapper/
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Filip Jirsák 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.
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Pavel... 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
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Filip Jirsák 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í.
Název: Re:obrazkova mapa s aktivnymi bodmi
Přispěvatel: Pavel... 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.
Název: Re:Obrázková mapa s aktivními body
Přispěvatel: Jenda 17. 04. 2014, 21:09:26
Nad obrázek bych absolutně napozicoval odkazy pomocí CSS a změnu řešil pomocí a:hover.
Název: Re:Obrázková mapa s aktivními body
Přispěvatel: Jenda 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.
Název: Re:Obrázková mapa s aktivními body
Přispěvatel: fdvgdsfsda 17. 04. 2014, 21:17:17
api4.mapy.cz
Název: Re:Obrázková mapa s aktivními body
Přispěvatel: Peter 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...