1

Тема: Інтерактивна карта

треба зробити інтерактивну карту як на тому сайті http://vsesvit-group.com.ua/ru/distriby … ibyutsiya/
Уявлення не маю як це можна зробити.......не підкажите

2

Re: Інтерактивна карта

Прихований текст

Потрібно було дати вірне посилання щоб сайт не доводилося шукати http://vsesvit-group.com.ua/ru/distribyutsiya/. І вся сторінка "важить" більше 5 МіБ.

А в чому полягає інтерактивність? Фон під фотографіями, коли наводиш вказівник мишки?

3

Re: Інтерактивна карта

коли наводиш курсор мишки.....має відкриватися блок з інформацією

4

Re: Інтерактивна карта

Спробував в трьох браузерах і не побачив ніякого блоку з інформацією.

5

Re: Інтерактивна карта

http://www.guinot.com.ua/salons/

мутиться це через тег area

ось кусок коду ;)

Прихований текст
<div id="maplugansk" class="mapu" style="display:none"></div>
                   <span id="alugansk" class="au">Луганск</span><div id="mapdnipropetrovsk" class="mapu" style="display:none"></div>
                   <span id="adnipropetrovsk" class="au">Днепропетровск</span><div id="mapkiev" class="mapu" style="display:none"></div>
                   <span id="akiev" class="au">Киев</span><div id="mapujgorod" class="mapu" style="display:none"></div>
                   <span id="aujgorod" class="au">Ужгород</span><div id="mapdoneck" class="mapu" style="display:none"></div>
                   <span id="adoneck" class="au">Донецк</span><div id="mapharkov" class="mapu" style="display:none"></div>
                   <span id="aharkov" class="au">Харьков</span><div id="mapodessa" class="mapu" style="display:none"></div>
                   <span id="aodessa" class="au">Одесса</span><div id="mapvinnica" class="mapu" style="display:none"></div>
                   <span id="avinnica" class="au">Винница</span><div id="mapsimferopol" class="mapu" style="display:none"></div>
                   <span id="asimferopol" class="au">Крым</span><div id="mappoltava" class="mapu" style="display:none"></div>
                   <span id="apoltava" class="au">Полтава</span><div id="maprivne" class="mapu" style="display:none"></div>
                   <span id="arivne" class="au">Ровно</span><div id="maphmelnickyi" class="mapu" style="display:none"></div>
                   <span id="ahmelnickyi" class="au">Хмельницкий</span><div id="mapzaporijja" class="mapu" style="display:none"></div>
                   <span id="azaporijja" class="au">Запорожье</span><div id="mapchernigov" class="mapu" style="display:none"></div>
                   <span id="achernigov" class="au">Чернигов</span><div id="mapjitomir" class="mapu" style="display:none"></div>
                   <span id="ajitomir" class="au">Житомир</span><map id="areas" name="areas"><area onmouseover="sWish('lugansk','1');" onmouseout="sWish('lugansk','0');" href="/salons/lugansk/" shape="poly" alt="Луганск" coords="544,119,549,119,549,111,553,112,558,116,565,116,576,123,582,117,587,124,598,125,600,131,608,132,613,128,617,128,614,136,618,143,613,158,605,161,609,166,621,166,618,171,607,172,607,181,613,182,619,196,615,220,589,222,588,215,580,214,558,186,558,176,550,168,550,160,542,156,544,119" />
                <area onmouseover="sWish('dnipropetrovsk','1');" onmouseout="sWish('dnipropetrovsk','0');" href="/salons/dnipropetrovsk/" shape="poly" alt="Днепропетровск" coords="508,193,499,190,492,197,492,192,487,190,486,185,479,175,463,177,453,167,445,167,436,168,425,174,421,181,424,187,420,190,410,184,408,188,398,188,400,193,408,193,402,199,396,202,397,216,381,229,383,242,380,245,384,253,391,253,393,256,400,251,403,255,409,256,413,253,415,256,424,256,427,254,430,254,435,249,440,249,442,252,448,252,448,242,446,236,443,232,446,229,443,227,445,222,451,221,464,220,446,221,472,219,477,222,482,221,489,229,487,231,502,232,506,226,503,222,505,218,514,221,515,210,511,206" />
                <area onmouseover="sWish('kiev','1');" onmouseout="sWish('kiev','0');" href="/salons/kiev/" shape="poly" alt="Киев" coords="269,169,274,169,283,163,292,167,292,161,307,162,315,153,317,136,324,133,334,136,341,121,347,115,349,110,347,107,343,106,343,100,338,96,331,101,323,102,317,99,317,92,314,89,304,89,304,84,301,82,300,77,298,76,297,61,292,59,290,53,285,50,278,51,272,53,269,49,260,56,260,61,256,64,265,92,261,105,268,114,267,126,269,131,260,139,261,146,264,158,261,163" />
                <area onmouseover="sWish('ujgorod','1');" onmouseout="sWish('ujgorod','0');" href="/salons/ujgorod/" shape="poly" alt="Ужгород" coords="59,180,54,180,52,177,48,177,46,171,41,171,39,169,38,162,29,156,21,167,19,173,15,178,10,182,11,189,13,190,17,200,21,199,25,209,31,207,32,210,31,215,33,217,36,213,41,212,44,210,51,217,58,216,67,220,74,221,77,223,90,222,92,220,92,214,88,212,90,210,82,200,77,201,76,192,69,194,69,190" />
                <area onmouseover="sWish('doneck','1');" onmouseout="sWish('doneck','0');" href="/salons/doneck/" shape="poly" alt="Донецк" coords="589,222,588,215,580,214,558,186,558,176,550,168,550,160,542,156,542,156,532,158,533,162,525,168,525,173,515,182,504,182,508,193,511,206,515,210,514,221,505,218,503,222,506,226,502,232,517,245,528,250,519,260,523,270,531,276,536,277,544,267,566,265,565,257,570,253,565,252,567,239,571,235,577,235,582,230,583,222" />
                <area onmouseover="sWish('harkov','1');" onmouseout="sWish('harkov','0');" href="/salons/harkov/" shape="poly" alt="Харьков" coords="544,119,542,156,532,158,533,162,525,168,525,173,515,182,504,182,508,193,499,190,492,197,492,192,487,190,486,185,479,175,463,177,453,167,445,167,445,160,454,160,460,150,459,140,453,140,450,133,439,128,441,116,454,108,462,108,466,105,469,99,480,98,486,106,491,103,497,109,505,101,512,101,518,95,524,95,529,100,529,106,534,113,539,114" />
                <area onmouseover="sWish('odessa','1');" onmouseout="sWish('odessa','0');" href="/salons/odessa/" shape="poly" alt="Одесса" coords="317,300,317,292,312,284,323,282,322,277,315,272,317,268,308,268,306,264,307,255,304,249,292,250,290,242,288,239,288,234,284,228,288,223,280,223,275,219,269,220,263,226,257,223,253,226,245,222,238,228,243,233,248,230,251,241,247,257,258,266,262,263,260,276,264,278,263,284,275,291,274,305,278,309,271,315,270,310,266,310,263,313,257,308,252,309,249,313,248,304,239,309,238,318,243,323,239,326,239,332,232,333,232,340,222,347,223,356,212,356,216,367,230,372,233,367,237,369,248,361,260,362,264,367,264,373,268,369,268,361,262,360,262,343,265,344,265,351,271,353,271,347,274,346,276,342,282,342,292,333,291,326,296,326,305,311,305,304" />
                <area onmouseover="sWish('vinnica','1');" onmouseout="sWish('vinnica','0');" href="/salons/vinnica/" shape="poly" alt="Винница" coords="261,146,256,146,253,149,246,149,244,147,244,143,243,133,238,133,235,137,207,137,204,142,205,146,202,151,206,157,206,171,202,171,200,169,194,168,189,178,189,195,192,197,191,206,201,204,216,215,223,216,220,220,224,224,228,220,236,222,238,228,245,222,256,226,257,223,263,226,269,220,269,213,272,209,275,211,277,209,277,205,279,202,264,177,269,169,261,163,264,158" />
                <area onmouseover="sWish('simferopol','1');" onmouseout="sWish('simferopol','0');" href="/salons/simferopol/" shape="poly" alt="Крым" coords="411,321,424,320,426,317,437,322,443,323,447,321,450,322,454,338,467,357,475,364,483,362,488,355,493,359,500,353,515,356,518,359,510,365,513,373,505,377,499,377,491,380,484,373,477,374,474,379,465,386,465,392,459,389,443,395,426,414,418,416,409,411,404,410,400,405,406,402,405,395,409,391,408,381,400,373,397,375,391,374,379,365,372,368,368,368,366,362,389,344,403,339,409,339,411,335,408,334,407,325" />
                <area onmouseover="sWish('poltava','1');" onmouseout="sWish('poltava','0');" href="/salons/poltava/" shape="poly" alt="Полтава" coords="379,100,383,100,385,98,391,101,402,101,406,99,410,101,417,97,419,101,419,104,425,114,427,118,429,119,441,116,439,128,450,133,453,140,459,140,460,150,454,160,445,160,445,167,436,168,425,174,421,181,424,187,420,190,410,184,406,181,393,182,389,175,380,168,371,164,371,160,367,153,370,149,357,135,358,127,352,124,352,120,347,115,349,110,352,110,357,106,364,110,372,107" />
                <area onmouseover="sWish('rivne','1');" onmouseout="sWish('rivne','0');" href="/salons/rivne/" shape="poly" alt="Ровно" coords="188,96,188,76,199,58,199,51,206,47,207,41,193,42,190,33,181,34,148,22,137,22,141,26,141,28,136,35,139,41,136,51,138,53,144,51,153,63,149,66,152,69,153,72,149,73,150,77,145,82,143,89,137,85,127,87,126,91,119,93,122,100,117,104,121,106,120,112,127,124,135,114,143,110,154,110,155,115,159,111,163,111,174,99,179,98,181,95" />
                <area onmouseover="sWish('hmelnickyi','1');" onmouseout="sWish('hmelnickyi','0');" href="/salons/hmelnickyi/" shape="poly" alt="Хмельницкий" coords="155,115,159,111,163,111,174,99,179,98,181,95,188,96,189,104,196,113,200,113,200,124,197,126,200,135,207,137,204,142,205,146,202,151,206,157,206,171,202,171,200,169,194,168,189,178,189,195,171,198,169,196,164,196,164,200,160,203,158,199,153,199,150,192,149,175,151,161,150,148,153,135,151,128" />
                <area onmouseover="sWish('zaporijja','1');" onmouseout="sWish('zaporijja','0');" href="/salons/zaporijja/" shape="poly" alt="Запорожье" coords="424,256,427,254,430,254,435,249,440,249,442,252,448,252,448,242,446,236,443,232,446,229,443,227,445,222,451,221,464,220,446,221,472,219,477,222,482,221,489,229,487,231,502,232,517,245,528,250,519,260,523,270,531,276,518,286,510,286,501,294,498,293,487,294,479,302,466,312,463,307,462,311,445,301,445,298,441,294,446,286,436,278,435,266,432,263,428,267" />
                <area onmouseover="sWish('chernigov','1');" onmouseout="sWish('chernigov','0');" href="/salons/chernigov/" shape="poly" alt="Чернигов" coords="388,4,385,16,389,20,386,23,386,28,382,28,378,34,378,37,380,42,380,49,379,56,377,59,376,64,374,67,375,71,381,75,383,80,380,85,381,89,379,100,372,107,364,110,357,106,352,110,349,110,347,107,343,106,343,100,338,96,331,101,323,102,317,99,317,92,314,89,304,89,304,84,301,82,300,77,298,76,297,61,300,58,297,45,303,33,313,20,318,20,322,22,323,18,339,18,343,23,349,22,354,17,356,7,366,10,374,11,384,3" />
                <area onmouseover="sWish('jitomir','1');" onmouseout="sWish('jitomir','0');" href="/salons/jitomir/" shape="poly" alt="Житомир" coords="260,56,260,61,256,64,265,92,261,105,268,114,267,126,269,131,260,139,261,146,256,146,253,149,246,149,244,147,244,143,243,133,238,133,235,137,207,137,200,135,197,126,200,123,200,113,196,113,189,104,188,96,188,76,199,58,199,51,206,47,208,50,211,42,214,42,216,45,220,44,225,39,227,46,232,44,237,46,236,52,241,54,242,48,248,45,252,42,255,45,256,53" />
                </map>            </div>
Подякували: Replace1

6

Re: Інтерактивна карта

читав що через формат svg можна зробити

7

Re: Інтерактивна карта

http://www.ammap.com/javascript-maps/drill-down/  готового є дуже багато ;)