Създаване на активната област на изображенията на картата в HTML с помощта на карта маркер - Уеб решения

В този урок ще разгледаме в практиката. как да създадете активна площ на изображението на картата с помощта на карта на HTML тагове. Този етикет е проектиран специално за тези задачи. Когато може да дойде по-удобно. Мисля, че там, където въображението ви ще ви позволи. Тя дава.

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

Това ще ни даде. - Той ще ни покаже нещо, което съм написал по-горе. Всички препратки или блокира първоначално са правоъгълни толкова, колкото ние се опитваме. Ние няма да се говори за по-сложните варианти. Също така ние ще се вземат под внимание граничен радиус новите свойства CSS3. който може да се използва, за да закръглят всеки ъгъл.

В този пример, се счита, HTML5-компонент. Така че нашата червен правоъгълник. коя връзка ще изглежда така:

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

Но има решение. и да ни помогне да намерите HTML-маркер

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

И така клавиатурата, за да се бори ..
Създаване на графично ни липсва, тъй като не е толкова трудно. толкова по-необходимо не е графично шедьовър, но само няколко - три от геометрични фигури. така че можем да приемем, че тя вече е там. с разделителна способност от 300 х 300. отговаря на map.gif име и започнете с маркирането:

1) Създаване на документ HTML. нека map.html
Тогава той създава контейнер. който предписва начина, по който да ни map.gif озаглавена картина. и да я определят като карта. предписва usemap атрибут. което става ясно, че тази снимка браузър е интерактивна карта. , на която можете да изберете активната зона:

Започнете. В момента ние имаме контейнер с активен образ. но ако отворите браузъра. ще видим една снимка. и мишката. клика, така че нищо не се случва. като необходимостта от създаване на активен регион. Ето защо ние продължаваме да:

2) Създаване на контейнер за активните региони с помощта на картата на маркер. да не забравяме, че тя има затварящ таг:

3) Сега трябва да се създадат връзки поле, за да фигури с помощта на площ тагове. Те трябва да се постави между отварянето и затварянето на картата маркер.

б) ние сме на площада на втория етап. За разлика от кръглата форма е. че за изолиране на правоъгълна или квадратна форма област използвайки атрибут = "прякото". и coords стойност на атрибута се задава x1y1, x2y2 /. Това означава, че можете просто да изберете точка на x1y1-това е началото. x2y2 тази цел. Оказва се, ако решите да споделите с h1u1 0.0 и x2y2 10.10 можете да получите 10 * 10 квадрат в горния ляв ъгъл.

в) На трето място, ние анализираме атрибут подразбиране. тъй като това е най-лесно смилаеми в този урок. Тя може да ви помогне да идентифицирате всички останали пространство. не заета от други фигури. да настоява отвъд цифрите. посетител или се движат в правилната посока. или може да получите необходимата информация. Такъв, че когато се натисне се появява на свободната зона. добавите събитие OnClick:

г) И накрая, погледнете по-сложна версия на фигурата. Бих казал, че не по-сложна и по-многофункционален и нестандартно. Този атрибут на форма = "поли". която ви позволява да маркирате областта многостранен. в нашия случай, с негова помощ, очертах ромб и триъгълник. разделена на две части. Всяка от тези стойности, които използва форма = "поли". Той се различава от предишните фигури, така че тегли чертата от и до каза координати. който може да бъде N-номер. Т.е.. x1y1, x2y2, x3y3, x4y4. Оказва се, че можете да се капсулират много сложна област.

Така че ние демонтирани примера. колкото е възможно с кът за етикет на вградената карта и създаване на различни активни области - връзки към едно изображение. Ако изведнъж изключена картина. за тази цел той е предписан етикет ALT = "алтернативен текст". така, че във всеки случай, връзката ще се вижда. Всички код. пресъздадени от нас в тази HTML5-пример (урок) изглежда така:

интерактивна карта на изображението

"Създаване на активна област на карти с - маркер на картата» - Подобни страници

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

Създаване на сайтове, техните възгледи Ви предлага създаването на следните видове обекти: сайт-карти, официален уебсайт блог сайт, онлайн магазин, корпоративен сайт. По принцип малък сайт за тези, които не се нуждаят да съдържа отдел.

Сайт Пятигорск - студио Сайтове + Web Studio Сайтове, ангажирани в създаването на ексклузивни сайтове в CMS и в цяла България. Значението на уеб сайт на компанията днес не може да се надценява. Според сайта като клиент съдия за вашата фирма в голям.