Этот пост научит вас:
- Что такое HTML-карты изображений?
- Как создать карты изображений в HTML-документе?
- Как создать карту изображений, связанную с другой страницей?
Что такое HTML-карты изображений?
Карта изображения представляет собой изображение с областями, по которым можно щелкнуть. Чтобы создать карту изображения в HTML, « <карта> используется элемент ». Кроме того, один или несколько « <область> » добавляются в элемент «
Синтаксис
Синтаксис для указания карт изображений в документе HTML приведен ниже:
< изображение источник знак равно 'изображения/img1.jpg' все знак равно 'ноутбук' карта использования знак равно '#кликспейс' >
< карта название знак равно 'кликспейс' >
< область форма знак равно 'прямой' координаты знак равно «224 37 422 312» href знак равно 'ноутбук.html' >
< / карта >
“ <изображение> ” определяется со следующими атрибутами:
- “ источник ” указывает путь к изображению.
- “ все ” показывает альтернативный текст, когда изображение не может загрузиться.
- “ карта использования ” указывается, чтобы сделать области изображения кликабельными. Чтобы сделать ссылку, ее значение должно совпадать с классом или идентификатором элемента «
“ <карта> » добавляется элемент со следующими атрибутами:
- “ форма ” указывает размер области HTML “ <карта> элемент.
- “ координаты Атрибут определяет координаты кликабельной области.
- “ href ” устанавливает URL-адрес источника.
Как создать карты изображений в HTML-документе?
Чтобы создать карту изображения в документе HTML, ознакомьтесь с приведенными инструкциями:
- В HTML добавьте « <дел> ” элемент и присвоить класс ” изображение-карта ».
- В этом div добавьте « <изображение> », чтобы добавить изображение, связанное с обсуждаемыми выше атрибутами.
- Затем добавьте HTML « <карта> » и назначьте ему « место для клика ' название.
- Обратите внимание, что « карта использования атрибуту присваивается имя « #кликспейс », указывая на « название ” атрибута тега “
- Внутри него добавьте « <область> ” с указанными выше атрибутами:
< изображение источник знак равно 'изображения/img1.jpg' все знак равно 'ноутбук' карта использования знак равно '#кликспейс' >
< карта название знак равно 'кликспейс' >
< область форма знак равно 'прямой' координаты знак равно «224 37 422 312» href знак равно 'ноутбук.html' >
< / карта >
< / див >
Давайте перейдем к разделу CSS, чтобы настроить размер изображения.
Стиль «» в CSS
Используйте « .image-карта ' для доступа к ' <дел> ” и примените следующие свойства CSS:
.image-карта {
ширина : 700 пикселей;
маржа: автомобиль;
}
Вот описание упомянутых свойств CSS:
- “ ширина Свойство устанавливает ширину элемента div.
- “ прибыль ” добавляет больше места вокруг элемента.
Стиль элемента «img»
.image-карта img {
ширина : 100 %;
}
Смотрите, координаты области, указанные в « координаты ” теперь кликабельны:
В следующем разделе мы узнаем, как связать карту изображения с другим источником.
Как создать карту изображений, связанную с другой страницей?
Создайте еще одну HTML-страницу с расширением « .html ”, выполнив шаги, указанные ниже:
- В нашем случае мы даем ему имя « ноутбук.html ».
- Добавьте элемент div и назначьте ему класс». ноутбук-img ».
- Затем поместите изображение с помощью кнопки « <изображение> » и свяжите « источник ' и ' ширина атрибуты.
- Затем укажите абзац с помощью « <р> элемент:
< див класс знак равно 'ноутбук-img' >
< изображение источник знак равно '/images/ноутбук.jpg' ширина знак равно '400 пикселей' >
< п >Ноутбук — это портативный компьютер, который можно перемещать и использовать в различных условиях.< / п >
< / див > В CSS укажите следующие свойства CSS для « ноутбук-img ' класс:
.ноутбук-img {
ширина : 500 пикселей;
маржа: автомобиль;
}
Вывод
Теперь мы свяжем « ноутбук.html 'страница к изображению' <область> ” элемент первой страницы. Для этого укажите URL страницы в поле « href », атрибут элемента « », как показано ниже:
< область форма знак равно 'прямой' координаты знак равно «310 57 590 470» href знак равно 'ноутбук.html' > Вывод
Мы успешно узнали, что такое карты изображений и как они связаны с другими источниками.
Заключение
HTML « <карта> » используется для создания карты изображения или изображения с кликабельными областями. Чтобы определить интерактивные области изображения, один или несколько « <область> » добавляются в элемент «
Используйте « .image-карта ' для доступа к ' <дел> ” и примените следующие свойства CSS:
.image-карта {ширина : 700 пикселей;
маржа: автомобиль;
}
Вот описание упомянутых свойств CSS:
- “ ширина Свойство устанавливает ширину элемента div.
- “ прибыль ” добавляет больше места вокруг элемента.
Стиль элемента «img»
.image-карта img {ширина : 100 %;
}
Смотрите, координаты области, указанные в « координаты ” теперь кликабельны:
В следующем разделе мы узнаем, как связать карту изображения с другим источником.
Как создать карту изображений, связанную с другой страницей?
Создайте еще одну HTML-страницу с расширением « .html ”, выполнив шаги, указанные ниже:
- В нашем случае мы даем ему имя « ноутбук.html ».
- Добавьте элемент div и назначьте ему класс». ноутбук-img ».
- Затем поместите изображение с помощью кнопки « <изображение> » и свяжите « источник ' и ' ширина атрибуты.
- Затем укажите абзац с помощью « <р> элемент:
< изображение источник знак равно '/images/ноутбук.jpg' ширина знак равно '400 пикселей' >
< п >Ноутбук — это портативный компьютер, который можно перемещать и использовать в различных условиях.< / п >
< / див >
В CSS укажите следующие свойства CSS для « ноутбук-img ' класс:
.ноутбук-img {ширина : 500 пикселей;
маржа: автомобиль;
}
Вывод
Теперь мы свяжем « ноутбук.html 'страница к изображению' <область> ” элемент первой страницы. Для этого укажите URL страницы в поле « href », атрибут элемента « », как показано ниже:
< область форма знак равно 'прямой' координаты знак равно «310 57 590 470» href знак равно 'ноутбук.html' >Вывод
Мы успешно узнали, что такое карты изображений и как они связаны с другими источниками.
Заключение
HTML « <карта> » используется для создания карты изображения или изображения с кликабельными областями. Чтобы определить интерактивные области изображения, один или несколько « <область> » добавляются в элемент «