| Autor | Zpráva | ||
|---|---|---|---|
| Nikinkira Profil |
#1 · Zasláno: 26. 6. 2023, 21:28:43
Dobrý den,
jsem úplný amatér, co html neviděl ani z rychlíku, přesto se snažím na svůj blog dostat nějakým způsobem klikací mapu. Našla jsem si návod, jak jí v GIMPU vytvořit a stačilo jen zkopírovat kód a vložit na stránku... leč na stránce se obrázek nezobrazí (pouze taková ta rozbitá ikonka). Zkusila jsem (nevím, jestli to není nesmysl) ten text [České_okresy_1960] (naimportován) vyměnit za odkaz na ten konkrétní obrázek, který jsem si na web nahrála. Poté už se obráze objeví, ale prokliky nefungují a já si nevím rady, kde hledat chybu, jelikož jsem celý kód jen okopírovala z GIMPU. Nebo může být kámen úrazu na blogspotu, že takový "pokročilý" kód nepřechroustá? Předem děkuji za jakoukoliv radu. <img src="[České_okresy_1960] (naimportován)" width="1053" height="624" border="0" usemap="#map" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:LENOVO IDEAPAD 330 --> <area shape="poly" coords="513,243,515,245,521,241,525,240,526,234,536,233,537,235,545,234,549,237,552,237,552,233,559,233,559,229,565,226,568,229,569,235,576,234,577,232,580,232,580,228,588,227,592,229,597,229,597,232,599,232,600,238,607,239,609,242,610,244,614,246,618,249,620,251,619,256,616,258,616,261,612,261,612,264,609,266,606,268,607,270,604,271,601,269,598,271,597,273,592,273,588,270,585,270,581,268,579,270,576,267,573,269,570,272,565,272,560,270,558,270,556,272,552,272,549,273,546,275,544,279,539,280,535,280,530,280,527,280,525,275,522,274,522,272,518,271,518,265,516,264,513,265,510,263,505,261,504,259,504,258,507,255,506,252,509,248,508,246,512,243" alt="Pardubice" href="http://xxxxx.blogspot.com/2023/06/pardubice.html" /> </map> |
||
| tttttt Profil * |
#2 · Zasláno: 26. 6. 2023, 23:22:27
„Zkusila jsem (nevím, jestli to není nesmysl) ten text [České_okresy_1960] (naimportován) vyměnit za odkaz na ten konkrétní obrázek, který jsem si na web nahrála“
Správný pokus, má tam být odkaz tak, aby se obrázek zobrazil. * V usemap nemá být mřížka, tj. usemap="map".
* Mapa musí být v kódu dřív než obrázek (tím se nejsem jistý, ale určitě to neuškodí). Blogpost kód HTML stránky neinterpretuje, jen ho předá dál uživateli do prohlížeče. Teprv ten rozhoduje o tom, jestli se mapa zobrazí nebo ne. |
||
| Nikinkira Profil |
#3 · Zasláno: 27. 6. 2023, 07:00:50
Děkuji moc za radu,
snad jsem udělala vše správně, obrázek se už zobrazuje, ale ten proklik prostě ne.... <img usemap="map" src="https://ams03pap003files.storage.live.com/y4m01-BGpF9g_0g_pUN0-mQDzdAGrrgzalMbfAkzFbjBsVboVDOqN1iWx1op6u7_Hx7455mATfsW60g8CBLo7mYG1EjzFXT5AsWbKxIbtALsfeByhvVM5ycIqHX3u7uXVKNip_tTPw97aIneMfIUh4Ri4p9uD60NWEmQ_amVAe4U3J_givOHvSUmJR8zTL-WLPh0kfxIvgfMC5HMQFuMhQI90VNQ94Oa8xDyx8ZtLkH1dE?encodeFailures=1&width=1053&height=624" width="1053" height="624" border="0" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:LENOVO IDEAPAD 330 --> <area shape="poly" coords="513,243,515,245,521,241,525,240,526,234,536,233,537,235,545,234,549,237,552,237,552,233,559,233,559,229,565,226,568,229,569,235,576,234,577,232,580,232,580,228,588,227,592,229,597,229,597,232,599,232,600,238,607,239,609,242,610,244,614,246,618,249,620,251,619,256,616,258,616,261,612,261,612,264,609,266,606,268,607,270,604,271,601,269,598,271,597,273,592,273,588,270,585,270,581,268,579,270,576,267,573,269,570,272,565,272,560,270,558,270,556,272,552,272,549,273,546,275,544,279,539,280,535,280,530,280,527,280,525,275,522,274,522,272,518,271,518,265,516,264,513,265,510,263,505,261,504,259,504,258,507,255,506,252,509,248,508,246,512,243" alt="Pardubice" href="http://xxxxx.blogspot.com/2023/06/pardubice.html" /> </map> |
||
| tttttt Profil * |
Moje chyba, mřížka tam má být, s ní už mi to udělá klikatelný odkaz na Pardubicích.
<img usemap="#map" src="https://ams03pap003files.storage.live.com/y4m01-BGpF9g_0g_pUN0-mQDzdAGrrgzalMbfAkzFbjBsVboVDOqN1iWx1op6u7_Hx7455mATfsW60g8CBLo7mYG1EjzFXT5AsWbKxIbtALsfeByhvVM5ycIqHX3u7uXVKNip_tTPw97aIneMfIUh4Ri4p9uD60NWEmQ_amVAe4U3J_givOHvSUmJR8zTL-WLPh0kfxIvgfMC5HMQFuMhQI90VNQ94Oa8xDyx8ZtLkH1dE?encodeFailures=1&width=1053&height=624" width="1053" height="624" border="0" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:LENOVO IDEAPAD 330 --> <area shape="poly" coords="513,243,515,245,521,241,525,240,526,234,536,233,537,235,545,234,549,237,552,237,552,233,559,233,559,229,565,226,568,229,569,235,576,234,577,232,580,232,580,228,588,227,592,229,597,229,597,232,599,232,600,238,607,239,609,242,610,244,614,246,618,249,620,251,619,256,616,258,616,261,612,261,612,264,609,266,606,268,607,270,604,271,601,269,598,271,597,273,592,273,588,270,585,270,581,268,579,270,576,267,573,269,570,272,565,272,560,270,558,270,556,272,552,272,549,273,546,275,544,279,539,280,535,280,530,280,527,280,525,275,522,274,522,272,518,271,518,265,516,264,513,265,510,263,505,261,504,259,504,258,507,255,506,252,509,248,508,246,512,243" alt="Pardubice" href="http://xxxxx.blogspot.com/2023/06/pardubice.html" /> </map> myslím, že ta mřížka chybí i v popisu na <a name="map">Map</a>, šla by doplnit? |
||
| Nikinkira Profil |
#5 · Zasláno: 27. 6. 2023, 15:30:35
Teď jsem se do toho trochu zamotala, myslíte takto?
<img usemap="#map" src="https://ams03pap003files.storage.live.com/y4m01-BGpF9g_0g_pUN0-mQDzdAGrrgzalMbfAkzFbjBsVboVDOqN1iWx1op6u7_Hx7455mATfsW60g8CBLo7mYG1EjzFXT5AsWbKxIbtALsfeByhvVM5ycIqHX3u7uXVKNip_tTPw97aIneMfIUh4Ri4p9uD60NWEmQ_amVAe4U3J_givOHvSUmJR8zTL-WLPh0kfxIvgfMC5HMQFuMhQI90VNQ94Oa8xDyx8ZtLkH1dE?encodeFailures=1&width=1053&height=624" width="1053" height="624" border="0" /> <map name="#map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:LENOVO IDEAPAD 330 --> <area shape="poly" coords="513,243,515,245,521,241,525,240,526,234,536,233,537,235,545,234,549,237,552,237,552,233,559,233,559,229,565,226,568,229,569,235,576,234,577,232,580,232,580,228,588,227,592,229,597,229,597,232,599,232,600,238,607,239,609,242,610,244,614,246,618,249,620,251,619,256,616,258,616,261,612,261,612,264,609,266,606,268,607,270,604,271,601,269,598,271,597,273,592,273,588,270,585,270,581,268,579,270,576,267,573,269,570,272,565,272,560,270,558,270,556,272,552,272,549,273,546,275,544,279,539,280,535,280,530,280,527,280,525,275,522,274,522,272,518,271,518,265,516,264,513,265,510,263,505,261,504,259,504,258,507,255,506,252,509,248,508,246,512,243" alt="Pardubice" href="http://s-nelou-me-bavi-svet.blogspot.com/2023/06/pardubice.html" /> </map> Omlouvám se a děkuji za trpělivost, to je tak, když si ženská něco vymyslí a jednodušší by bylo se naučit čínsky :-D Tady mám tu mapu na blogu s-nelou-me-bavi-svet.blogspot.com/2023/06/mapa.html |
||
| tttttt Profil * |
#6 · Zasláno: 27. 6. 2023, 16:09:05
Tahle část je v pořádku, problém je jinde. Na blogu proklik funguje, ale nachází se ve Svitavách, ne v Pardubicích. Obrázek má 1 053 px × 624 px, které jsou i v atributech
width="1053" height="624". Pomocí stylů je zmenšený na 810 px × 520 px a mapa se pak netrefí do správné oblasti.
Nejlepší řešení je bude vytvořit ten obrázek ve stejné velikosti, v jaké bude na webu, už v GIMPu. |
||
| Nikinkira Profil |
#7 · Zasláno: 27. 6. 2023, 16:23:14
Děkuji moc!!!
S tímhle, věřím, že už si poradit dokážu :) |
||
| Nikinkira Profil |
#8 · Zasláno: 28. 6. 2023, 20:34:33
Ach jo, tak jsem zase tu :(
S mapou jsem si poradila, ale problém nastane, když zmenším okno prohlížeče nebo stránku zobrazím v mobilu, pak se prokliknout nedá... jde to nějak vyřešit nebo obejít nebo stránky budou fungovat jen s dostatečně velkým monitorem? |
||
| Keeehi Profil |
No existují knihovny, které by měly responzivitu doplnit.
knihovna 1 knihovna 2 (možná budou i další) Moderní varianta (podporující responzivitu) se dá udělat s použitím SVG. Jak to funguje. Generátor. |
||
| Nikinkira Profil |
#10 · Zasláno: 29. 6. 2023, 20:41:57
Teda, obdivuju vás a hlavně děkuji! Přes ten generátor se mi to povedlo a funguje.
Už jen jediný malý detail, i když v nejhorším případě, bez toho to taky bude fungovat... Přes ten generátor šla pouze označit oblast "obdelníkem" a nevím, jestli nějak jde ho vyměnit za ty souřadnice, kterými už mám přes GIMP vybraný celý okres. <svg version="1.1" xmlns="www.w3.org/2000/svg" xmlns:xlink="www.w3.org/1999/xlink" viewBox="0 0 1030 610"> <image width="1030" height="610" xlink:href="ams03pap003files.storage.live.com/y4mT8ktSsRP3dQsvdakYMB8A3Dn-ilUck2jBBHZlK3RMxNGtq9xtlU01VMYlRCZgSofRab41J_TwmXM3pD5Pht8e8YSroy_IpHKa0ClZlMTEe7WBDBXujSSbTfCihvlVTZLg-AsSODJOebnqd4g6uFOmrJt-NFgyKTTnfQg0eD8sdPcmD8GH4rP5lFeS6_OMqt8_pLC0W-U1-DCgEA37Z0KUdtT4frErz9oRixU6KXEw0c?encodeFailures=1&width=1030&height=610"></image> <a xlink:href="s-nelou-me-bavi-svet.blogspot.com/2023/06/pardubice.html"> <rect x="512" y="228" fill="#fff" opacity="0" width="86" height="50"></rect> </a> <a xlink:href="s-nelou-me-bavi-svet.blogspot.com/2023/06/hradec-kralove.html"> <rect x="507" y="183" fill="#fff" opacity="0" width="85" height="50"></rect> </a> </svg> |
||
| Keeehi Profil |
Nikinkira:
Samozřejmě, že se to dá udělat. Místo rect a atributů x, y, width, height se použije polygon a ty souřadnice se dají do atributu points
<polygon points="513,243,515,245,521,241,525,240,526,234,536,233,537,235,545,234,549,237,552,237,552,233,559,233,559,229,565,226,568,229,569,235,576,234,577,232,580,232,580,228,588,227,592,229,597,229,597,232,599,232,600,238,607,239,609,242,610,244,614,246,618,249,620,251,619,256,616,258,616,261,612,261,612,264,609,266,606,268,607,270,604,271,601,269,598,271,597,273,592,273,588,270,585,270,581,268,579,270,576,267,573,269,570,272,565,272,560,270,558,270,556,272,552,272,549,273,546,275,544,279,539,280,535,280,530,280,527,280,525,275,522,274,522,272,518,271,518,265,516,264,513,265,510,263,505,261,504,259,504,258,507,255,506,252,509,248,508,246,512,243" fill="#0f0"></polygon> (Pro testování je barva zelená, aby to bylo dobře vidět. Pak tam vrať fill="#fff" opacity="0")
Jelikož nefunguje ten podkladový obrázek, tak nemůžu zkontrolovat, jestli to na sebe sedí. |
||
|
Časová prodleva: 1 rok
|
|||
0