- Операторы
- Управляющие инструкции
- JS Объекты
- браузер BOM
- HTML DOM
- События
- HTML Объекты
- Anchor
- Area
- Audio, Video
- Base
- Canvas
- Form
- IFrame
- Image
- Input
- Link
- Meta
- Option
- Progress
- Select
- Style
- Table
- Textarea
- TableHead и TableDate
- TableRow
- Промисы, async/await
- Сетевые запросы
- Бинарные данные и файлы
- Модули
- Классы
- Разное
Image
Объект Image представляет собой HTML элемент <img>.
Свойства объекта Image
alt | Возвращает или устанавливает значение атрибута alt данного элемента. |
complete | Возвращает булевое значение: true — если изображение полностью загружено. Если картинка в процессе загрузки — тогда false . |
height | Возвращает или устанавливает значение атрибута height данного элемента. |
isMap | Возвращает или устанавливает значение атрибута ismap данного элемента. |
naturalHeight | Возвращает исходную высоту изображения |
naturalWidth | Возвращает исходную ширину изображения |
src | Возвращает или устанавливает значение атрибута src данного элемента. |
useMap | Возвращает или устанавливает значение атрибута useMap данного элемента. |
width | Возвращает или устанавливает значение атрибута width данного элемента. |
alt
Свойство alt возвращает или устанавливает значение атрибута alt
Синтаксис
imageObject.alt [ = text ]
text
- Задает альтернативный текст для изображения. Рекомендации:
- Текст должен описать изображение, если изображение содержит информацию
- Текст должен объяснить , где связь идет , если изображение находится внутри <a> элемента
- Используйте alt = "", если изображение только для украшения
Возвращаемое значение
Строка, представляющая собой альтернативный текст изображения
Пример
см. complete
complete
Свойство complete возвращает булевое значение: true
— если изображение полностью загружено. Если картинка в процессе загрузки — тогда false
.
Синтаксис
imageObject.complete
Возвращаемое значение
Логическое значение, которое указывает, завершил браузер загрузку изображения или нет. Возвращает true
, если загрузка завершена, в противном случае - false
Пример
<img id="Img1" src="compman.gif" alt="Computerman" width="107" height="98"> <img id="Img2" src="example/figure.jpg" alt="Вини-Пух" width="100" height="111"><br> <button onclick="myFunction()"> Попробуй </button> <hr> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("Img1"); var y = document.getElementById("Img2"); document.getElementById("demo").innerHTML = x.alt + ": " + x.complete + "<br>" + y.alt + ": " + y.complete; } </script>
height
Свойство height возвращает или устанавливает значение атрибута height
.
Синтаксис
imageObject.height [ = strHeight ]
strHeight
- высота в пикселях.
Возвращаемое значение
Строка, представляющая высоту изображения в пикселях
Пример
<img id="Img" src="example/figure.jpg" alt="Вини-Пух" width="100" height="111"> <br> <button onclick="myFunction()"> Попробуй </button> <script> function myFunction() { var z = document.getElementById("Img"); z.height = "250"; z.width = "250"; } </script>
isMap
Свойство isMap возвращает или устанавливает значение атрибута ismap
.
Синтаксис
imageObject.isMap [ = true|false ]
true
- изображение является серверной графической картой.false
- изображениеНЕ
является серверной графической картой.
Возвращаемое значение
Логическое, возвращает true
, если изображение является частью серверной карты изображений, в противном случае - false
Комментарии
Атрибут ismap
разрешен только если <img> элемент является потомком <a> элемента с действительным атрибутом HREF
.
Пример
<p> <a href="ismap.php"> <img id="i" src="images/sample.gif" alt="ismap" width="150" height="150" ismap> </a></p> <button onclick="myFunction()"> Попробуй </button><br /> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("i").isMap; document.getElementById("demo").innerHTML = "isMap = " + x; } </script>
naturalHeight
Свойство naturalHeight возвращает первоначальную высоту изображения.
Синтаксис
imageObject.naturalHeight
Возвращаемое значение
Число, представляющее оригинальную высоту изображения в пикселях
Совместимость с браузерами
Да | 9,0 | Да | Да | Да |
Пример
<img id="i" src="example/figure.jpg" /><br /> <button onclick="myFunction()"> Попробуй </button><br /> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("i"); document.getElementById("demo").innerHTML = "ширина = " + x.naturalWidth + '<br>' + "высота = " + x.naturalHeight; } </script>
naturalWidth
Свойство naturalHeight возвращает первоначальную ширину изображения.
Синтаксис
imageObject.naturalWidth
Возвращаемое значение
Число, представляющее оригинальную ширину изображения в пикселях
Совместимость с браузерами
Да | 9,0 | Да | Да | Да |
Пример
см. naturalHeight
src
Свойство src возвращает или устанавливает значение атрибута src
.
Синтаксис
imageObject.src [ = strSrc ]
strSrc
- URL изображения. Возможные значения:
- Абсолютный URL - указывает на другой веб - сайт
- Относительный URL - указывает на файл внутри сайта
Возвращаемое значение
Строка, представляющая URL изображения. Возвращает весь URL, включая протокол
Пример
<img id="i" src="example/figure.jpg" /><br /> <button onclick="myFunction()"> Попробуй </button><br /> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("i"); document.getElementById("demo").innerHTML = 'src = "' + x.src + '"'; } </script>
useMap
Свойство useMap возвращает или устанавливает значение атрибута usemap
.
Синтаксис
imageObject.useMap [ = #mapname ]
#mapname
- хэш-символ ( "#") + имя идентификатора, которое указывается в значении атрибута usemap
, и то же имя, заданное у атрибута name
тега <map>.
Возвращаемое значение
Строка, представляющая значение атрибута usemap
изображения, в том числе хэш-символа ( "#")
Пример
<img id="planets" src="images/planets.gif" width="145" height="126" usemap="#planetmap"> <map name="planetmap"> <area id="venus" shape="circle" coords="124,58,8" alt="Венера" title="Венера" href="images/venus.php"> </map> <br /> <button onclick="myFunction()">Попробуй</button><br /> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("planets").useMap; document.getElementById("demo").innerHTML = 'useMap = ' +x; } </script>
width
Свойство height возвращает или устанавливает значение атрибута width
.
Синтаксис
imageObject.height [ = strWidth ]
strWidth
- ширина в пикселях.
Возвращаемое значение
Строка, представляющая ширину изображения в пикселях
Пример
см. height