Трудно ли е да се направи.

[lozan1]

Въпросът ми е следният?

Имам снимка 1 : http://i51.tinypic.com/nw0y06.gif

 

- картата на България

Как да се направи така, че като се кликне в горното най-ляво квадратче, да се отвори снимка 2: http://i53.tinypic.com/2zyea0k.gif - картата на региона на най-лявото квадратче, само, че в мащаб 1:50 000 и т.н. с останалите квадратчета от първата карта?

[InsectEater1]

Ако е на HTML е лесно - използва се т. нар. Image map

изглежда като нещо подобно:

 

<img src="http://i51.tinypic.com/nw0y06.gif" usemap="#bulgaria" border="0">

<map name="bulgaria">
<area shape="rect" coords="188,130,196,136" href="http://i53.tinypic.com/2zyea0k.gif">
<area shape="rect" coords="x1,y1,x2,y2" href="Адрес 1, който ще се отвори">
<area shape="rect" coords="x3,y3,x4,y4" href="Адрес 2, който ще се отвори">
...
...
...
<area shape="rect" coords="x240,y240,x241,y241" href="Адрес 120, който ще се отвори">
</map>

 

В самата карта (map) се описват с координати областите, които да представляват хипервръзки. В случая за shape ако е rect (за формата ако е правоъгълник),се задават в пиксели координатите на горния ляв и долния десен ъгъл на правоъгълничето.

Допълнително с JavaScript могат да се правят благинки, като например да се показва правоъгълниче с надпис със заглавието на картата на която би отишъл потребителя, ако щракне върху посочената област.

[lozan1]

Ако е на HTML е лесно - използва се т. нар. Image map

изглежда като нещо подобно:

 

<img src="http://i51.tinypic.com/nw0y06.gif" usemap="#bulgaria" border="0">

<map name="bulgaria">
<area shape="rect" coords="188,130,196,136" href="http://i53.tinypic.com/2zyea0k.gif">
<area shape="rect" coords="x1,y1,x2,y2" href="Адрес 1, който ще се отвори">
<area shape="rect" coords="x3,y3,x4,y4" href="Адрес 2, който ще се отвори">
...
...
...
<area shape="rect" coords="x240,y240,x241,y241" href="Адрес 120, който ще се отвори">
</map>

 

В самата карта (map) се описват с координати областите, които да представляват хипервръзки. В случая за shape ако е rect (за формата ако е правоъгълник),се задават в пиксели координатите на горния ляв и долния десен ъгъл на правоъгълничето.

Допълнително с JavaScript могат да се правят благинки, като например да се показва правоъгълниче с надпис със заглавието на картата на която би отишъл потребителя, ако щракне върху посочената област.

 

1.Как да определя координатите и да ги опиша?

Искам по този начин да подредя и другите листове.

2.И как мога да съхраня цялото това на компютъра, без да е необходимо картите да са качени в интернет?

[InsectEater1]

Създава се с текстов редактор html файл, в който се слага това съдържание. След това се отваря с браузър. Все едно че е интернет страница. Хубаво е да се направи от някой, който разбира поне малко от web дизайн за да сложи и допълнителните необходими елементи, че да се оформи завършена страница.

 

Това не е единствения начин. Може да се реализира и на програмен език от сорта на C, Visual Basic, Java и т.н. даже и на Flash. Просто варианта с html файл е най-бърз и универсален - необходими са текстов редактор (например Notepad) и браузър. И още някоя и друга екстра, че да се измерят пикселите докъде са за всяко малко квадратче. Има и програми за правене на map-ове

 

Ако искаш мога да ти направя html файла, само трябва да кажеш по какъв начин си кръстил големите картинки, понеже не са малко бройките. Ако ти върши работа да се гледа чрез браузър разбира се.

 

Редакция: докато отговоря на поста ти си сварил да го промениш до неузнаваемост

[lozan1]

Създава се с текстов редактор html файл, в който се слага това съдържание. След това се отваря с браузър. Все едно че е интернет страница. Хубаво е да се направи от някой, който разбира поне малко от web дизайн за да сложи и допълнителните необходими елементи, че да се оформи завършена страница.

 

Това не е единствения начин. Може да се реализира и на програмен език от сорта на C, Visual Basic, Java и т.н. даже и на Flash. Просто варианта с html файл е най-бърз и универсален - необходими са текстов редактор (например Notepad) и браузър. И още някоя и друга екстра, че да се измерят пикселите докъде са за всяко малко квадратче. Има и програми за правене на map-ове

 

Ако искаш мога да ти направя html файла, само трябва да кажеш по какъв начин си кръстил големите картинки, понеже не са малко бройките. Ако ти върши работа да се гледа чрез браузър разбира се.

 

Редакция: докато отговоря на поста ти си сварил да го промениш до неузнаваемост

 

Благодаря,

Промених го, защото се сетих да го поставя в Notepad и да го отворя с браузър!

Стана!

Но не мога да си обясна как определяш координатите на малкото квадратче, Искам да го разбера, за да мога по-нататък да "закача" към другите малки квадратчета и останалите карти.

Пък за дизайна.............., ще го мисля по-нататък.

[InsectEater1]

1.Как да определя координатите и да ги опиша?

Искам по този начин да подредя и другите листове.

2.И как мога да съхраня цялото това на компютъра, без да е необходимо картите да са качени в интернет?

 

1. По най различни начини. За примера използвах инструмента Miscelaneous -> Display Ruler от добавката за firefox Web developer toolbar, коят така или иначе имам инсталирана. Има и други програми и начини за мерене на разстоянието в пиксели от горния ляв ъгъл на картинка.

2. С копиране. Всичко седи в една папка и главната картинка и големите карти и html файла. В описанието на картата пътищата до картинките се задават просто като се напише само името на картинката, без нищо друго. А Html файла като се щракне двойно върху него така или иначе се отваря с браузър.

 

Понеже квадратчетата са много малки, дори да се ползва уж удобна програма, която прави карти по метода point and click (посочи и щракни), може да не стане много точно. Според мен ще е най добре, ако се вземат координатите на крайните квадратчета само, а координатите за вътрешните квадратчета се изчислят, Така няма да се получи застъпване на области или непокрити зони, заради непрецизно посочване с мишката. Все пак бройката е голяма.

 

skype: InsectEater

[lozan1]

1. По най различни начини. За примера използвах инструмента Miscelaneous -> Display Ruler от добавката за firefox Web developer toolbar, коят така или иначе имам инсталирана. Има и други програми и начини за мерене на разстоянието в пиксели от горния ляв ъгъл на картинка.

2. С копиране. Всичко седи в една папка и главната картинка и големите карти и html файла. В описанието на картата пътищата до картинките се задават просто като се напише само името на картинката, без нищо друго. А Html файла като се щракне двойно върху него така или иначе се отваря с браузър.

 

Понеже квадратчетата са много малки, дори да се ползва уж удобна програма, която прави карти по метода point and click (посочи и щракни), може да не стане много точно. Според мен ще е най добре, ако се вземат координатите на крайните квадратчета само, а координатите за вътрешните квадратчета се изчислят, Така няма да се получи застъпване на области или непокрити зони, заради непрецизно посочване с мишката. Все пак бройката е голяма.

 

skype: InsectEater

 

Още веднъж благодаря!

По 2 : поставих всичко в една папка, промених адресите на картите и се получи)

По 1: Инсталирах си добавката към Мозила и видях как се определят координатите, но си прав, че квадратчетата в голямата карта са много малки................ и трудно ще се определят координатите на квадратчетата, които са по - навътре.

"........Според мен ще е най добре, ако се вземат координатите на крайните квадратчета само, а координатите за вътрешните квадратчета се изчислят...." Какъв е алгоритъма да изчисля координатите на , примерно на следващото квадратче?

[InsectEater1]

Понеже стана късно, предлагам да продължим утре. Прегледай дали този файл ще ти свърши работа:

 

map.zip

 

Някои от "квадратчетата" трябва да си ги изтриеш. Всичко е именувано, така че не би трябвало да имаш проблем.

 

Лека нощ

[lozan1]

ОК, лека!

[lozan1]

Понеже стана късно, предлагам да продължим утре. Прегледай дали този файл ще ти свърши работа:

 

map.zip

 

Някои от "квадратчетата" трябва да си ги изтриеш. Всичко е именувано, така че не би трябвало да имаш проблем.

 

Лека нощ

 

Чудесен е!

Още веднъж , БЛАГОДАРЯ! )

 

 

2. С копиране. Всичко седи в една папка и главната картинка и големите карти и html файла. В описанието на картата пътищата до картинките се задават просто като се напише само името на картинката, без нищо друго. А Html файла като се щракне двойно върху него така или иначе се отваря с браузър.

 

 

skype: InsectEater

 

Възниква следният въпрос:

Като преместя проекта на другомясто в компютъра, спира да работи. Предполагам, това е понеже, при описването на големите карти е посочен пътя, където те са били тогава, когато е правен проекта.

Идеята е проекта да работи, независимо къде ще бъде поставен, най-вече и на друг компютър. Всъщнос , като се замисля може би трябва някакъв инсталатор (извинявам се, ако не се изразявам правилно, не съм специалист в тази област). Но разсъждавайки асоциативно е така ( когато инсталираш някаква програма, тя създава на точно посочени места файлове, с които работи)!

[InsectEater1]

Не е проблем да се пренася. HTML файла и картинките се разполагат в една и съща папка и когато трябва да се преместят, се мести цялата папка.

Когато се задават пътищата в картата, се пише единтвено името на картинката, а не целият и път. Например

href="map_1-6.gif

а не

href="C:/Documents and settings/user/desktop/bg/map_1-6.gif"

 

просто трябва да се използва т. нар. относителен път, за да може да е преносимо и да работи навсякъде. А след като се разположи папката някъде, шорткъти към html файла може да си прави човек където му скимне.

 

Редакция:

Ако трябва да се направи по-прегледно, може да се направи следната структура:

 

[Име на папка]

|Index.html

\[Име на подпапка]

|Karta1.gif

|Karta2.gif

|Karta3.gif

|Karta4.gif

 

Пътищата в index.html файла се задават така:

href="Име на подпапка/Кarta1.gif

По този начин който влезе в папката няма да вижда много файлове и да се чуди на кой да щракне, а ще види само един. Не е задължително да се казва index.html - може startme.html или "Карта на българия.html". Важното нещо е да се задава ОТНОСИТЕЛНИЯ път до картинките когато се описват а не абсолютния.

[lozan1]

Как да направя така, че картния лист да се отваря в дясно от главната карта, като по този начин , на екрана се виждат и двете?

(Картния лист се отваря , като се кликне върху горното най-ляво квадратче от главната карта)

Проект.rar

[InsectEater1]

Според мен това възпроизвежда начина, който си дал като описание:

 

Проект 2.zip

[MartinAngel]

Здравейте,

 

Надявам се, че не приемате коментара ми като натрапване, но се зачетох, стана ми любопитно и реших да задам няколко въпроса, тъй като изучавах HTML през последната учебна година (2011/2012) и най- сложното, до което стигнах бяха фреймовете. Искам да попитам каква е разлика между относителния и реалния път до файловете и възможна ли е работа със директории? А също, тъй като стана въпрос за измерване на пиксели- има ли вероятност, при която измерването им да бъде относително, т.е. при измерването им на един компютър (монитор) да се постигне желания резултат, а при преместването на файла на друг терминал с различни размери на монитора, да не работят? Благодаря предварително.

[s.feradov]

Искам да попитам каква е разлика между относителния и реалния път до файловете и възможна ли е работа със директории?

 

Да, разлика има. Относителния път може да бъде:

 

exampleimage.jpg

В този случай браузърът ще търси изображението в същата директория, където се намират файловете на самия сайт.

exampledirectory/exampleimage.jpg

В този случай браузърът ще търси въпросното изображение в съответната директория на същия сървър, на който се намират файловете на страницата.

 

Абсолютният (пълен) път включва целия път към даден файл.

http://www.examplesite.com/exampledirectory/exampleimage.jpg.

 

Ако сайтът се хоства от даден сървър, е препоръчително да се използва относителен път до файловете, тъй като, в противен случай, при евентуална смяна на хостинга ще трябва да се редактират абсолютно всички страници.