Прибавяне на JavaScript за визуализиране на обекти


Пример 10 - добавяне на JavaScript към HTML-кода

HTML-кода на горния пример е

<html>

<head>
<title> http://geonext.de </title>
<style type="text/css">
body, b, td, li, p, div, h1, h2, h3, h4 {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#000000;
}
a {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#0080c0;
}
</style>
</head>
<body bgcolor="#ffffff">
<!--<a href="http://geonext.de" style="font-family:sans-serif;font-weight:bold;font-size:12px;text-decoration:none;color:#000000;">© 2002 - http://geonext.de</a><br>-->
<!-- GEONExT start-->
<applet id="xxx" code="geonext.Geonext.class" codebase="./" archive="geonext.jar" width="600" height="480" MAYSCRIPT>
<param name="scriptable" value="true">
<param name="geonext" value="file:primer10.gxt">
</applet>
<!-- GEONExT end-->
<p> <p>
</body>
</html>

Прибавяме подходящ текст в HTML-файла, както и meta-редовете за кирилица.

<html>

<head>
<title> http://geonext.de </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">

<style type="text/css">
body, b, td, li, p, div, h1, h2, h3, h4 {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#000000;
}
a {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#0080c0;
}
</style>
</head>
<body bgcolor="#ffffff">

<h1> Стълбата на бай Иван</h1>
<p> На стената на вилата на бай Иван е поставена една стълба. Бай Иван се покатерил на нея. Покажи бай Иван.</p>
<p> Но стълбата не била поставена добре и се плъзнала надолу, натисни бутона <img src="../content/img/play.jpg" align="bottom" border="0" alt="play"> и виж как пада стълбата. </p>
<p> Каква траектория описва бай Иван, докато пада със стълбата?</p>
<p> Можеш да сменяш позицията на бай Иван.</p>
<!--<a href="http://geonext.de" style="font-family:sans-serif;font-weight:bold;font-size:12px;text-decoration:none;color:#000000;">© 2002 - http://geonext.de</a><br>-->
<!-- GEONExT start-->
<applet id="xxx" code="geonext.Geonext.class" codebase="./" archive="geonext.jar" width="600" height="480" MAYSCRIPT>
<param name="scriptable" value="true">
<param name="geonext" value="file:primer10.gxt">
</applet>
<!-- GEONExT end-->
<p> <p>
</body>
</html>

Оформяме текста „Покажи бай Иван“ като линк, който при кликване прави точките М и Р видими.

Виж как изглежда примера

<html>

<head>
<title> http://geonext.de </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="bg">
<style type="text/css">
body, b, td, li, p, div, h1, h2, h3, h4 {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#000000;
}
a {
font-family:sans-serif;
font-size=14px;
text-decoration:none;
color:#0080c0;
}
</style>
</head>
<body bgcolor="#ffffff">
<h1> Стълбата на бай Иван</h1>
<p> На стената на вилата на бай Иван е поставена една стълба. Бай Иван се покатерил на нея.
<a class="link" href="javascript:;"onclick="javascript:document.xxx.set('M.visible=true;P.visible=true');">Покажи бай Иван.</a></p>
<p> Но стълбата не била поставена добре и се плъзнала надолу, натисни бутона <img src="../content/img/play.jpg" align="bottom" border="0" alt="play"> и виж как пада стълбата. </p>
<p> По каква траектория се движи бай Иван, докато пада със стълбата?</p>
<p> Можеш да сменяш позицията на бай Иван.</p>
<!--<a href="http://geonext.de" style="font-family:sans-serif;font-weight:bold;font-size:12px;text-decoration:none;color:#000000;">© 2002 - http://geonext.de</a><br>-->
<!-- GEONExT start-->
<applet id="xxx" code="geonext.Geonext.class" codebase="./" archive="geonext.jar" width="600" height="480" MAYSCRIPT>
<param name="scriptable" value="true">
<param name="geonext" value="file:primer10.gxt">
</applet>
<!-- GEONExT end-->
<p> <p>
</body>
</html>


Какво е важно за Вас:

  1. На мястото на М и Р запишете имената на обектите, които желаете да бъдат визуализирани.
  2. Бихте могли да прибавите още обекти, като след последното true напишете ; и добавите ime.visible=true. Заместете ime с името на Вашия обект.
  3. Бихте могли и да скриете обекти, като напишете ime.visible=false;.Заместете ime с името на Вашия обект.