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

JavaScript III част

Карти на изображения в JavaScript

От HTML ръководството, І част, изображения е дадена карта на изображение с области, в които може да се кликва. Всяка от тези области е свързана с хипер връзка. С използване на JavaScript могат да се добавят събития в таговете в тази карта. Тага поддържа събитията onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus и onBlur. Ще добавим появяване на описателен текст при събитие onMouseOver. В секция head се добавя функция writeText() с параметър txt, която се извиква от програмата в секцията body и като аргумент се подава текста, който трябва да се покаже при събитие onMouseOver. Този текст е записан вътре в тага след shape като onMouseOver="writeText('текст')". Това означава, че при събитие onMouseOver ще се извика функцията writeText() за изпълнение с аргумент 'текст' (виж примера в браузъра):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Карти на изображения в JavaScript </title>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<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"
onMouseOver="writeText('Слънцето е звездата на Слънчевата система с маса 332900 пъти по-голяма от земната.
')" alt="Слънце" href="/planets/sun.html" />
<area shape="circle" coords="210,403,38" onMouseOver="writeText('Меркурий е най-близката
планета до Слънцето на разстояние около 60 милиона км. Масата му е около 18 пъти по-малка
от земната.')" alt="Меркурий" href="/planets/mercury.html" />
<area shape="circle" coords="157,368,40" onMouseOver="writeText('Венера се намира на около 105 милиона км от Слънцето и е с маса 0,815 от земната.')" alt="Венера" href="/planets/venus.html" />
<area shape="circle" coords="97,289,46" onMouseOver="writeText('Земята се намира на разстояние 149,6 милиона км
от Слънцето и е най голямата от вътрешните планети.')" alt="Земя" href="/planets/earth.html" />
<area shape="circle" coords="74,221,27" onMouseOver="writeText('Марс се намира
на разстояние 225 милиона км от Слънцето и е с маса повече от 9 пъти по-малка от
земната.')" alt="Марс" href="/planets/mars.html" />
<area shape="circle" coords="97,137,64" onMouseOver="writeText('Първата от външните планети
Юпитер е газов гигант на разстояние 778 милиона км от Слънцето. Масата му е 318 земни
маси и е с 2,5 пъти по-голяма маса от всички планети взети заедно.')" alt="Юпитер"
href="/planets/jupiter.html" />
<area shape="poly" coords="61,28,192,23,274,99,166,102,61,28"
onMouseOver="writeText('Газовият гигант Сатурн е на разстояние от 1421 милиона км от
Слънцето и е с маса 95 пъти по-голяма от земната.')" alt="Сатурн" href="/planets/saturn.html" />
<area shape="circle" coords="300,80,27" onMouseOver="writeText('Планетата Уран е на разстояние от 2932 милиона км от
Слънцето и е с маса 14 пъти по-голяма от земната.')" alt="Уран" href="/planets/uranus.html" />
<area shape="circle" coords="367,115,21" onMouseOver="writeText('Нептун е на разстояние
4488 милиона км от Слънцето и с маса 17 пъти по-голяма от земната.')" alt="Нептун" href="/planets/neptune.html" />
<area shape="circle" coords="400,138,9" onMouseOver="writeText('Плутон е с ексцентрична орбита
с разстояние от Слънцето между 4488 и 7330 милиона км и с маса четири пъти по-малка от
тази на земята.')" alt="Плутон" href="/planets/pluto.html" />
</map>
<p id="desc"></p>
</body>
</html>