Autor Zpráva
Pet210593
Profil *
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
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 *
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
Pet210593:
a nepomohlo by už hotové řešení http://www.cezetmap.cz/ ?
Chamurappi
Profil
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
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
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í woffy 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
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
Reakce na quinuxe:
Když na to tak znovu koukám, tak to korektně funguje až od Exploreru 9, ne?
quinux
Profil
Str4wberry:
od IE7, v IE8 to nefunguje, protože je tam zapomenutý console.log, na to už jsem je taky upozornil :)
Str4wberry
Profil
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
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 borderem.
quinux
Profil
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
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0