Овај пост ће вас научити:
- Шта су ХТМЛ мапе слика?
- Како направити мапе слика у ХТМЛ документу?
- Како направити мапу слике повезану са другом страницом?
Шта су ХТМЛ мапе слика?
Мапа слике је слика са областима на које се може кликнути. Да бисте направили мапу слика у ХТМЛ-у, „ <мапа> ” елемент се користи. Штавише, један или више „ <област> ” ознаке се додају унутар елемента „<мап>” да би се одредиле области.
Синтакса
Синтакса за одређивање мапа слика у ХТМЛ документу је поменута у наставку:
< имг срц = 'имагес/имг1.јпг' све = 'лап топ' усемап = „#цлицкспаце“ >
< Мапа име = 'цлицкспаце' >
< области облик = 'рецт' координате = '224,37,422,312' хреф = 'лаптоп.хтмл' >
< / Мапа >
„ <имг> ” елемент је дефинисан следећим атрибутима:
- “ срц ” одређује путању слике.
- “ све ” приказује алтернативни текст када слика не може да се учита.
- “ усемап ” је наведено да би се на подручја слике могла кликнути. Да бисте направили везу, њена вредност мора бити иста као класа или ИД елемента „<мап>”.
„ <мапа> ” елемент се додаје са следећим атрибутима:
- “ облик ” одређује величину области ХТМЛ-а “ <мапа> ” елемент.
- “ координате ” атрибут дефинише координате области на коју се може кликнути.
- “ хреф ” атрибут поставља УРЛ извора.
Како направити мапе слика у ХТМЛ документу?
Да бисте креирали мапу слике у ХТМЛ документу, погледајте дата упутства:
- У ХТМЛ, додајте „ <див> ” елемент и додели класу “ слика-мапа ”.
- Унутар овог дива додајте „ <имг> ” да бисте додали слику повезану са горе наведеним атрибутима.
- Затим додајте ХТМЛ “ <мапа> ” елемент и доделите му „ цлицкспаце ” име.
- Имајте на уму да „ усемап ” атрибуту је додељено име “ #цлицкспаце “ показујући на “ име ” атрибут ознаке „<мап>”.
- Унутар њега додајте „ <област> ” са горе наведеним атрибутима:
< имг срц = 'имагес/имг1.јпг' све = 'лап топ' усемап = „#цлицкспаце“ >
< Мапа име = 'цлицкспаце' >
< области облик = 'рецт' координате = '224,37,422,312' хреф = 'лаптоп.хтмл' >
< / Мапа >
< / див >
Идемо према ЦСС одељку да прилагодимо величину слике.
Стил „<див>” у ЦСС-у
Користите „ .имаге-мап ” класе за приступ „ <див> ” и примените следећа ЦСС својства:
.имаге-мап {ширина : 700пк;
маргина: ауто;
}
Ево описа поменутих ЦСС својстава:
- „ ширина ” својство поставља ширину елемента див.
- „ маргина ” својство додаје више простора око елемента.
Стилски елемент „имг“.
.имаге-мап имг {ширина : 100 %;
}
Видите, координате области наведене у „ координате ” атрибут сада може да се кликне:
У следећем одељку ћемо научити како да повежемо мапу слике са другим извором.
Како направити мапу слике повезану са другом страницом?
Направите још једну ХТМЛ страницу са екстензијом “ .хтмл “ пратећи кораке наведене у наставку:
- У нашем случају, дајемо му име „ лаптоп.хтмл ”.
- Додајте див елемент и доделите му класу “ лаптоп-имг ”.
- Затим поставите слику користећи „ <имг> ” елемент и придружите „ срц ' и ' ширина ” атрибути.
- Затим наведите пасус користећи „ <п> ” елемент:
< имг срц = '/имагес/лаптоп.јпг' ширина = '400пк' >
< стр >Лаптоп је преносиви рачунар који се може померати и користити у разним подешавањима.< / стр >
< / див >
У ЦСС-у наведите следећа ЦСС својства за „ лаптоп-имг ' класа:
.лаптоп-имг {ширина : 500пк;
маргина: ауто;
}
Излаз
Сада ћемо повезати „ лаптоп.хтмл ” страница до слике “ <област> ” елемент прве странице. Да бисте то урадили, наведите УРЛ странице на „ хреф ” атрибут елемента „<ареа>” као што је приказано у наставку:
< области облик = 'рецт' координате = '310,57,590,470' хреф = 'лаптоп.хтмл' >Излаз
Успешно смо научили шта су мапе слика и како су повезане са другим изворима.
Закључак
ХТМЛ “ <мапа> ” елемент се користи за креирање мапе слике или слике са областима на које се може кликнути. Да бисте дефинисали области слике на које се може кликнути, један или више „ <област> ” ознаке се додају унутар елемента „<мап>”. Штавише, атрибути повезани са ознаком „<ареа>” су „ облик ”, “ координате ', и ' хреф ”. Овај пост је илустровао како да направите ХТМЛ мапе слика са примером.