Autor | Zpráva | ||
---|---|---|---|
Pet210593 Profil * |
#1 · Zasláno: 17. 4. 2013, 17:23:31
Zdravím...
Snažím se nějak vytvořit interaktivní mapu ČR. (Tohle mám jako vzor : http://test.ikoner.sk/mapa/ tady fuguje jen středočeský kraj) Mám to udělané tak, žemi funguje už odkaz na ploše kterouc hci. Ale nevím, jak tam dostat to, že při najetí se změní barva. <img border="0" src="images/obrysova001.png" usemap="#images/obrysova001.png"><map name="images/obrysova001.png"> <area coords="1152,306,1151,317,1132,320,1119,331,1108,358,1100,381,1097,407,1094,427,1099,442,1110,441,1106,449,1114,450,1132,459,1142,459,1155,473,1176,475,1197,477,1209,481,1211,493,1223,498,1234,514,1250,530,1256,541,1272,546,1309,548,1330,554,1341,552,1348,572,1360,573,1364,582,1373,585,1400,561,1403,551,1415,549,1430,550,1444,555,1458,544,1459,534,1459,505,1447,485,1440,492,1427,475,1410,476,1401,437,1401,423,1399,411,1387,418,1360,409,1343,412,1332,403,1322,398,1298,386,1281,368,1272,375,1282,381,1270,384,1247,392,1213,358,1196,353,1187,334,1200,328,1218,317,1212,300,1211,283,1205,291,1190,298" shape="poly" href="http://seznam.cz"> </map> |
||
Michal Maršálek Profil |
#2 · Zasláno: 17. 4. 2013, 17:27:43
Zdravím,
tak se podívej jak to má autor tebou uvedené stránky...má prostě další obrázek, který má to dané místo vybarvené a po najetí ho vymění. |
||
Pet210593 Profil * |
#3 · Zasláno: 17. 4. 2013, 19:14:36 · Upravil/a: Pet210593
Jo tak jsem to dělal hnedka napoprvé, ale problém je když tomu doslava nerozumím a něco teda splácám a vytvořím toto:
http://www.vystava-moo.mysteria.cz/piste/tlacitka/index02.html Tak mě to při najetí bliká a nevím proč a je dost nepříjemné... <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script> function show(obr) { document.getElementById("mojaMapa").src=obr; switch(obr) { case 'praha.jpg': document.getElementById("mojText").innerHTML="Toto je Praha"; break; case 'images/obrysova002.png': document.getElementById("mojText").innerHTML="Toto je Slezsko"; break; } } function hide() { document.getElementById("mojaMapa").src="images/obrysova001.png"; document.getElementById("mojText").innerHTML=""; } </script> </head> <body> <map name="cesko"> <area href="#" onmouseover="show('praha.jpg');" onmouseout="hide();" shape="rect" coords="250, 260, 310, 290"> <area href="#" onmouseover="show('images/obrysova002.png');" onmouseout="hide();" shape="polygon" coords="1152,306,1151,317,1132,320,1119,331,1108,358,1100,381,1097,407,1094,427,1099,442,1110,441,1106,449,1114,450,1132,459,1142,459,1155,473,1176,475,1197,477,1209,481,1211,493,1223, 498,1234,514,1250,530,1256,541,1272,546,1309,548,1330,554,1341,552,1348,572,1360,573,1364,582,1373,585,1400,561,1403,551,1415,549,1430,550,1444,555,1458,544,1459,534,1459,505,1447,485, 1440,492,1427,475,1410,476,1401,437,1401,423,1399,411,1387,418,1360,409,1343,412,1332,403,1322,398,1298,386,1281,368,1272,375,1282,381,1270,384,1247,392,1213,358,1196,353,1187,334,1200 ,328,1218,317,1212,300,1211,283,1205,291,1190,298"> </map> <img id="mojaMapa" src="images/obrysova001.png" usemap="#cesko"> <div id="mojText"></div> </body> </html> Díky... Už jsem na to přišel Díky Dal jsem menší obrázek a jede to vpohodě. |
||
quinux Profil |
#4 · Zasláno: 17. 4. 2013, 23:26:37
Pet210593:
a nepomohlo by už hotové řešení http://www.cezetmap.cz/ ? |
||
Chamurappi Profil |
#5 · Zasláno: 17. 4. 2013, 23:56:11
Reaguji na quinuxe:
To je dost nešikovné řešení. Nejde to ovládat klávesnicí, na svém telefonu mapu neuvidím, protože zneužívají na grafiku písmo, a ve skriptech nepoužívají var , takže hrozí kolize…
Reaguji na Peta210593: Dej jako src průhledný obrázek (třeba s hranicemi) a měň spíš jeho pozadí.
|
||
quinux Profil |
#6 · Zasláno: 18. 4. 2013, 00:25:09
Chamurappi:
ovládání klávesnicí by bylo super, ale pokud nabídneš alternativní přístup, tak není nutné. Na telefon bych imho mapu vůbec nedával, protože trefovat se na malém displayi do prahy, bude asi peklo, takže na mobilu mapu schovat a nechat jen ten alternativní přístup, ostatně ušetříš tím návštěvníkovi data. A ten var, to netuším, na js nejsem zrovna odborník, ale zdrojáky máš k dispozici, takže pokud se vyskytne problém, jistě půjde ošetřit. |
||
Chamurappi Profil |
#7 · Zasláno: 18. 4. 2013, 01:03:09
Reaguji na quinuxe:
„pokud nabídneš alternativní přístup, tak není nutné“ Jaký alternativní přístup? Jsem normální uživatel, mačkám Tab a nefunguje mi to. S <area> tenhle problém nehrozí.
„Na telefon bych imho mapu vůbec nedával“ Ale <area> na telefonu funguje. To, jestli se hodí, je jiná debata.
Na úvodní stránce cezetmap.cz je mapa přibližně stejně prokreslená, jako na displeji mobilu otočeném na výšku, do Prahy bych se trefil. Sice by to nebylo komfortní, ale šlo by to. Navíc si můžu přizoomovat. Kdyby nepoužívali k zobrazování oblastí font, fungovalo by mi to. V práci mi proxy nepropouští woff y vůbec, tam uvidím stejná rozházená písmenka jako v telefonu. I kdyby mi to fungovalo, tak nabízet jako hotové řešení takovou zhůvěřilost…
„zdrojáky máš k dispozici, takže pokud se vyskytne problém, jistě půjde ošetřit“ Jasně, ale napsat si vlastní skript na mapu není o moc těžší než odhalit tuto nedbalost v takzvaně hotovém řešení. |
||
quinux Profil |
#8 · Zasláno: 18. 4. 2013, 08:12:06
Chamurappi:
„Jaký alternativní přístup? Jsem normální uživatel, mačkám Tab a nefunguje mi to. S <area> tenhle problém nehrozí.“ alternativní přístup ve formě seznamu krajů pod či nad mapu. Ten seznam takt jako tak budeš tvořit, protože po kliknutí na kraj, v detailu, asi nebudeš mapu znovu zobrazovat. Obecně je pak další věc, jestli vůbec mapu dávat, v drtivé většině případů je mapa jen dalším krokem mezi uživatelem a informacemi. Jestli chceš můžeme si o tom pokecat, ty víš kde ;) „Ale <area> na telefonu funguje“ ta mapa taky, ale zatím ne na všech, je to nová věc, určitě ji poladí „Jasně, ale napsat si vlastní skript na mapu není o moc těžší než odhalit tuto nedbalost v takzvaně hotovém řešení.“ tak abys neřekl, protože tvůrce náhodou znám, tak jsem mu napsal a podívá se na to, včetně ovládání klávesnicí :) |
||
Str4wberry Profil |
#9 · Zasláno: 18. 4. 2013, 08:56:21
Reakce na quinuxe:
Když na to tak znovu koukám, tak to korektně funguje až od Exploreru 9, ne? |
||
quinux Profil |
#10 · Zasláno: 18. 4. 2013, 09:22:43
Str4wberry:
od IE7, v IE8 to nefunguje, protože je tam zapomenutý console.log, na to už jsem je taky upozornil :) |
||
Str4wberry Profil |
#11 · Zasláno: 18. 4. 2013, 09:40:27
Ono je to možná rozbité jenom na hlavní straně. Ukázka mi ve zmíněných testovacích nástrojích při simulaci IE 7 trochu funguje, ale s příšernou odezvou a jiným (horším) vzhledem.
|
||
quinux Profil |
#12 · Zasláno: 18. 4. 2013, 09:46:25
Str4wberry:
v IE7, na virtuálu, běží plynule. Body nejsou kulaté, ale čtvercové, protože jsou využity CSS3, tohle nevidím jako problém. |
||
Chamurappi Profil |
Reaguji na quinuxe:
„zatím ne na všech, je to nová věc, určitě ji poladí“ Na WP7 jim nikdy nepojede, pokud budou k zobrazení oblastí zneužívat písmo. Je to od základu špatně vymyšlené. Když si zvětším písmo, tak vidím mapu větší, ale pozice myši se vztahují k původní velikosti. Pokud chtějí mít mapu na webu vektorovou, proč nepoužijí nějaký normálnější vektorový formát? „Body nejsou kulaté, ale čtvercové, protože jsou využity CSS3“ Kulatou tečku jde v části prohlížečů (včetně starších Explorerů) udělat tečkovaným border em.
|
||
quinux Profil |
#14 · Zasláno: 18. 4. 2013, 18:56:08
Chamurappi:
„Na WP7 jim nikdy nepojede, pokud budou k zobrazení oblastí zneužívat písmo.“ i Kdyby se to na WP7 nikdy nepodařilo rozchodit, tak jednak má WP7 minimální podíl, jednak již moc růst nebude, protože už je WP8 a jednak se opět nabízí možnost alternativního řešení (schování mapy pro mobily). Je to od základu špatně vymyšlené. Ne, ty jen za každou cenu hledáš negativa. „Když si zvětším písmo, tak vidím mapu větší, ale pozice myši se vztahují k původní velikosti. “ tip k vylepšení Pokud chtějí mít mapu na webu vektorovou, proč nepoužijí nějaký normálnější vektorový formát? a proč se nezeptáš jich? „Kulatou tečku jde v části prohlížečů (včetně starších Explorerů) udělat tečkovaným borderem.“ v části nebo ve všech? pokud v části, tak proč nevyužít nové vlastnosti? starší prohlížeče budou "odcházet" a nové to umí nebo budou umět. Není důvod zesložiťovat kód, jen proto, aby uživatelé s "umírajícím" prohlížečem viděli všechno úplně stejně. Důležité je, aby jim to fungovalo. |
||
Chamurappi Profil |
#15 · Zasláno: 18. 4. 2013, 19:17:35
Reaguji na quinuxe:
„i Kdyby se to na WP7 nikdy nepodařilo rozchodit…“ Normální <area> podobné potíže s kompatibilitou nemá. Jen porovnávám možnosti. Ano, hledám negativa a některá dost dobře vyřešit nejdou. Stavět základní funkčnost mapy na tom, že se povede načíst a interpretovat písmo, mi přijde divné.
„a proč se nezeptáš jich?“ Protože ty jsi při ruce a náhodou je znáš :-) „v části nebo ve všech?“ Ve zbytku by nebyly kulaté, ale hranaté. „tak proč nevyužít nové vlastnosti?“ Požadavek, aby tečkovaný border dělal kulaté tečky, je novinkou v CSS 3. Je pravděpodobné, že se to časem naučí všechny prohlížeče.
|
||
quinux Profil |
Chamurappi:
„Normální <area> podobné potíže s kompatibilitou nemá. Jen porovnávám možnosti. Ano, hledám negativa a některá dost dobře vyřešit nejdou. Stavět základní funkčnost mapy na tom, že se povede načíst a interpretovat písmo, mi přijde divné.“ ale normální area bude znamenat 3x větší datové přenosy, což u našich operátorů znamená, že brzy vyčerpáš FUP. Proto bych (osobně) taky vůbec takovou mapu pro mobily neřešil a šel bych do alternativní textové verze. Ale důvod proč se podobným mapám vyhnout úplně jsem již psal. „Protože ty jsi při ruce a náhodou je znáš :-)“ ale já jim nechci pokládat trapné otázky :) je to jedno z mnoha řešení dané věci a je na tobě jestli jej použiješ. Obecně jsou fontové ikonky dnes "trendy" :) „Ve zbytku by nebyly kulaté, ale hranaté.“ jako jsou teď :) „Požadavek, aby tečkovaný border dělal kulaté tečky, je novinkou v CSS 3. Je pravděpodobné, že se to časem naučí všechny prohlížeče.“ a to platí i pro aktuálně zvolený způsob, takže je to prostě jen o volbě toho způsobu |
||
Časová prodleva: 11 let
|
0