Главная » HTML » Работаем с изображениями
    РейтингРейтингРейтингРейтингРейтинг

Работаем с изображениями

Содержание:
  • § 1. Вставка изображения
  • § 2. Вставка изображения из нелокальных источников
  • § 3. Выравнивание изображения относительно текста
  • § 4. «Всплывание» изображения вправо/влево относительно текста
  • § 5. Изменение размера изображения
  • § 6. Альтернативный текст (используется при ошибке загрузки изображения)
  • § 7. Изображение как ссылка
  • § 8. Карта изображения

§ 1. Вставка изображения

Код  страницы

<html>
<body>

<p>
Вставка простого изображения:
<img src="skype.jpeg"
width="111" height="111">
</p>

<p>
Двигающееся изображение (анимация):
<img src="sun.gif"
width="62" height="62">
</p>

<p>
Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.
</p>

</body>
</html>

Результат в окне браузера

Вставка простого изображения: 

Двигающееся изображение (анимация): 

Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.


§ 2. Вставка изображения из нелокальных источников

Код  страницы

<html>
<body>

<p>Вставка изображения из другой папки (не из той, в которой находится ваша веб-страница):</p>
<img src="image/opera.jpg"
width="124" height="109">

<p>Вставка изображения с другого сайта:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg"
width="104" height="142">

</body>
</html>

Результат в окне браузера

Вставка изображения из другой папки (не из той, в которой находится ваша веб-страница):

Вставка изображения с другого сайта:


§ 3. Выравнивание изображения относительно текста

Код  страницы

<html>
<body>

<p>
Изображение
<img src="skype.jpeg"
align="bottom" width="48" height="48"> 
в тексте.
</p>

<p>
Изображение
<img src ="skype.jpeg"
align="middle" width="48" height="48"> 
в тексте.
</p>

<p>
Изображение
<img src ="skype.jpeg"
align="top" width="48" height="48"> 
в тексте.
</p>

<p>Помните, что выравнивание текста по нижнему краю картинки является выравниванием по умолчанию.</p>

<p>
Изображение
<img src ="skype.jpeg"
width="48" height="48"> 
в тексте.
</p>

<p>
<img src ="skype.jpeg"
width="48" height="48"> 
Изображение перед текстом.
</p>

<p>
Изображение после текста.
<img src ="skype.jpeg"
width="48" height="48"> 
</p>

</body>
</html>

Результат в окне браузера

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

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

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

Помните, что выравнивание текста по нижнему краю картинки является выравниванием по умолчанию.

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

 Изображение перед текстом.

Изображение после текста.                                   


§ 4. «Всплывание» изображения вправо/влево относительно текста

Код  страницы

<html>
<body>

<p>
<img src ="skype.jpeg"
align ="left" width="48" height="48"> 
Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.
</p><br /><br />

<p>
<img src ="skype.jpeg"
align ="right" width="48" height="48"> 
Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.
</p><br /><br />

</body>
</html>

Результат в окне браузера

      Изображение «всплывает» влево по отношению к тексту.

 Изображение «всплывает» вправо по отношению к тексту.                


§ 5. Изменение размера изображения

Код  страницы

<html>
<body>

<p>
<img src="skype.jpeg"
width="20" height="20">
</p>

<p>
<img src="skype.jpeg"
width="45" height="45">
</p>

<p>
<img src="skype.jpeg"
width="70" height="70">
</p>

<p>
Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.
</p>

</body>
</html>

Результат в окне браузера

Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.


§ 6. Альтернативный текст (используется при ошибке загрузки изображения)

Код  страницы

<html>
<body>

<img src="skype.jpeg" alt="Значок скайп" width="32" height="32">

<p>
Текстовые браузеры не могут отображать изображения и будут отображать текст, который указан в атрибуте «alt» тега img. В данном случае значением атрибута alt указан текст «Значок скайп».</p>
<p>
При наведении курсора мыши на изображение, некоторые браузеры отображают значение (текст) атрибута «alt».
</p>

</body>
</html>

Результат в окне браузера

Значок скайп

Текстовые браузеры не могут отображать изображения и будут отображать текст, который указан в атрибуте «alt» тега img. В данном случае значением атрибута alt указан текст «Значок скайп».

При наведении курсора мыши на изображение, некоторые браузеры отображают значение (текст) атрибута «alt».


§ 7. Изображение как ссылка

Код  страницы

<html>
<body>
<p>
Вы можете сделать изображение ссылкой:
<a href="http://www.skype.com/intl/ru/">
<img border="0" src="skype.jpeg" width="65" height="38">
</a>
</p>

</body>
</html>

Результат в окне браузера

Вы можете сделать изображение ссылкой:   


§ 8. Карта изображения

Код  страницы

<html>
<body>

<p>
Кликните на различных частях изображения, чтобы посмотреть дополнительную информацию.
</p>

<img src="tree.jpg" 
width="650" height="642" 
usemap="#tree">

<map name="tree">

<area shape="poly" 
coords="317,456,68,475,2,325,99,140,311,23,525,141,641,287,611,441" 
alt="krona"
href="krona.html">

<area shape="rect" 
coords="320,465,357,613" 
alt="stvol"
href="stvol.html">

</map>

</body>
</html>

Результат в окне браузера

Кликните на различных частях изображения, чтобы посмотреть дополнительную информацию.

Карта изображения в HTML (навигационные карты). Урок №11

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!