Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Изображения

В HTML изображенията се определят с тага <img>. Този таг съдържа атрибути и няма затварящ таг. За да се покаже дадено изображение на страницата трябва да се използва атрибут src, което определя източника. Стойността на този атрибут е адреса на изображението, което трябва да се покаже. Синтаксисът за показване на изображение image.png, което се намира примерно на адрес http://dimarini.net/images ще е следния:

    <img src="http://dimarini.net/images/image.png" />

Браузърът поставя изображението където се появява тага <img> в документа.

Пример за показване на изображение, което се намира в папка images където е html файла (виж примера в браузъра):

<html>
  <body>
	<img src="/images/rose.png" width="200" height="240" alt=”Българска роза”/>
  </body>
</html>

Файла с изображението (rose.png) трябва да се намира в същата папка в която е и html файла. В противен случай трябва да се укаже точното местонахождение на изображението. С параметрите width и height може да се монипулира оригиналния размер на изображението. С атрибута alt може да се зададе алтернативен текст за изображението. Стойността на този атрибут е записан от автора текст. Този алтернативен текст се появява когато браузъра не е заредил изображението.

По-долу е даден пример как да се добави фоново изображение към html страница. (виж примера в браузъра):

<html>
  <body background="images/silver-bg.jpg">
	<h3>Фонът на тази страница е зададен с изображение!</h3>
	<p>За html фон могат да се използват файлове с формат gif и jpg.</p>
	<p>Когато изображението е по-малко от страницата 
	то ще се повтаря за да я запълни.</p>
  </body>
</html>

В следващият пример е осъществена хипервръзка с помощта на изображение (виж примера в браузъра):

<html>
  <body>
	<p>Създаване на връзка с изображение:
	<a href="http://dimarini.net" target=”blank”>
	<img src="/images/sofia.jpg" alt="HTML tutorial" width="150" height="100" />
	</a></p>
	<p>Няма рамка на изображението, но все още е връзка:
	<a href="http://dimarini.net" target=”blank”>
	<img border="0" src="/sofia.jpg" alt="HTML tutorial" width="150" height="100" />
	</a></p>
  </body>
</html>

В следващият пример е показано как може да се разполага изображението отляво или отдясно на текста. Тук е използвано анимирано gif изображение (виж примера в браузъра):

<html>
  <body>
	<p>
	<img src="/images/auto_card.gif" align="left" width="226" height="90" /> 
	Това е параграф с изображение. Атрибутът за изравняване на изображението 
	е зададено на "left". Изображението се поставя от лявата страна на текста.
	</p>
	<br />
	<br />
	<br />
	<p>
	<img src="/auto_card.gif" align="right" width="226" height="90" />
	Това е параграф с изображение. Атрибутът за изравняване на изображението 
	е зададено на "right". Изображението се поставя от дясната страна на текста.
	</p>
  </body>
</html>

В следващият пример е представено създаването на карта от образи с области за кликване. Всяка от областите е хипервръзка (виж примера в браузъра):

<html>
  <body>
    <p>Кликнете на възможните места върху слънцето или 
	планетите за увеличено изображение!</p>
	<img src="/solar-system.jpg" width="420" height="426" alt="Слънчева система" usemap="#solarsystemmap" />
	<map name="solarsystemmap">
	<area shape="poly" coords="157,431,127,430,38,324,8,356,8,434,428,434,427,222,261,204,157,231,238,
	426,157,431" alt="Слънце" href="/planets/sun.html" />
	<area shape="circle" coords="210,403,38" alt="Меркурий" href="/planets/mercury.html" />
	<area shape="circle" coords="157,368,40" alt="Венера" href="/planets/venus.html" />
	<area shape="circle" coords="97,289,46" alt="Земя" href="/planets/earth.html" />
	<area shape="circle" coords="74,221,27" alt="Марс" href="/planets/mars.html" />
	<area shape="circle" coords="97,137,64" alt="Юпитер" href="/planets/jupiter.html" />
	<area shape="poly" coords="61,28,192,23,274,99,166,102,61,28" alt="Сотурн" href="/planets/saturn.html" />
	<area shape="circle" coords="300,80,27" alt="Уран" href="/planets/uranus.html" />
	<area shape="circle" coords="367,115,21" alt="Нептун" href="/planets/neptune.html" />
	<area shape="circle" coords="400,138,9" alt="Плутон" href="/planets/pluto.html" />
	</map>
  </body>
</html>

За да се дефинира квадрат за атрибута “shape” се използва стойност rect съответно със стойности за атрибута cords=“x1, y1, x2, y2”. При стойност circle се задават координатите на центъра и стойността на радиуса. При стойност poly се задават последователно координати на точки, като фигурата се затваря с координатите на начабната точка.