нужно что бы в определенном месте на определенной странице сайта работал js

@Arrenius · Регистрация: 01.06.2010

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток!
Ситуация такая, js не знаю вообще, но нужно что бы в определенном месте на определенной странице сайта работал js. В самом скрипте куча разноцветных кнопочек, при наведении на которые высвечивается разный текст, но это не важно особо. Скрипт я скачал готовый. Нужно просто его поместить в окошко на сайте.
В index.html пробовал писать так:

HTML5

<body>
<h1>ТЕКСТ В BODY</h1>
<div style=" width:500px; margin-left:100px;">
<script language="JavaScript" src="body.js"></script>
</div></body>

но ни какие параметры style ничего не меняют. Картинка с кнопочками как была зафиксирована в левом верхнем углу, так там и осталась.....еще и своим фоном весь экран залило и текста "ТЕКСТ В BODY" не видно.
Помогите плиз. Как такие вещи делать по уму?

@kbaht · 16.09.2010, 09:40

текст скрипта покажи

@Alorian · 16.09.2010, 10:29

Arrenius, по пунктам:
1. Правильно нужно писать так:

HTML5

1	<script src="body.js" type="text/javascript"></script>

2. Писать это нужно внутри <head>, вот так:

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!-- Тут все остальное что должно быть в <head> -->
    <script src="script.js" type="text/javascript"></script> <!-- Внимание на эту строку -->
</head>
<body>
<!-- Тут содержание страницы -->
</body>
</html>

3. Просто так скрипт скорее всего работать не будет. Работать будет только если это заранее предусмотрено создателем. Скорее всего нужно будет внести минимальные правки в сам скрипт, например указать id того элемента в который он будет помещать новый контент. Возможно потребуется еще какая либо адаптация. Без кода скрипта скзать конкретно ничего нельзя.

Итого:
Подключите скрипт правильно.
Внимательно прочитайте описание скрипта, либо выложите его код сюда.

@Arrenius · 16.09.2010, 12:04 **[ТС]**

Скрипт очень большой, попробую выложить, только описание массивов уберу. Вообще это таблица Менделеева, при наведении на каждый знак он увеличивается и высвечивается информация о элементе. Скрипт состоит из двух файлов. Основной body.js в кратком виде:

PHP

function crtab(){
    var tb='';
tb+='<html><head><title>Интерактивная Таблица Менделеева</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">';
tb+='body{font-family:Times;}';
for (var j= 0; j< 2; j++) {
var lp = j*50-(-30);
var lpb = j*50-(-22);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
for (var j= 2; j< 12; j++) {
var lp = j*50-(-70);
var lpb = j*50-(-62);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
for (var j= 12; j< 18; j++) {
var lp = j*50-(-80);
var lpb = j*50-(-72);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
 
for (var m= 0; m< 14; m++) {
var lap = m*50-(-30);
var lapb = m*50-(-22);
var mv = m-(-1);
tb+='.gra' + mv + '{position:absolute; left:' + lap + 'px} ';
tb+='.bgra' + mv + '{position:absolute; left:' + lapb + 'px} ';
}
 
for (var k= 0; k< 7; k++) {
var tp = k*50-(-90);
var tpb = k*50-(-82);
var kv = k-(-1);
tb+='.pe' + kv + '{top:' + tp + 'px} ';
tb+='.bpe' + kv + '{top:' + tpb + 'px} ';
}
 
for (var k= 7; k< 9; k++) {
var tp = k*50-(-130);
var tpb = k*50-(-122);
var kv = k-(-1);
tb+='.pe' + kv + '{top:' + tp + 'px} ';
tb+='.bpe' + kv + '{top:' + tpb + 'px} ';
}
 
for (var pc= 0; pc< 7; pc++) {
var tp = pc*50-(-103);
var pcv = pc-(-1);
tb+='.period' + pcv + '{position:absolute; left:5px; top:' + tp + 'px} ';
}
 
tb+='.grouplg1{position:absolute; left:45px; top:70px}';                <!-- цифра над колонкой 1 -->
 
tb+='.grouplg2{position:absolute; left:95px; top:120px}';               <!-- цифра над колонкой 2 -->
 
for (var pl= 2; pl< 12; pl++) {
var glp = pl*50-(-85);
var plv = pl-(-1);
tb+='.grouplg' + plv + '{position:absolute; left:' + glp + 'px; top:220px}';  <!-- цифры над колонками 3-12 -->
}
 
 
for (var pl= 12; pl< 18; pl++) {
var glp = pl*50-(-95);
var plv = pl-(-1);
tb+='.grouplg' + plv + '{position:absolute; left:' + glp + 'px; top:120px}'; <!-- цифры над колонками 3-17 -->
}
 
tb+='.grouplg18{position:absolute; left:945px; top:70px}';                   <!-- цифра над колонкой 18 -->
 
for (var s= 0; s< 2; s++) {
var shp = s*50-(-30);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  <!-- римские над колонками 1-2 -->
}
 
for (var s= 2; s< 8; s++) {
var shp = s*50-(-70);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  <!-- римские над колонками 3-8 -->
}
 
for (var s= 8; s< 10; s++) {
var shp = s*50-(-170);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  <!-- римские под колонками 1-2 -->
}
 
for (var s= 10; s< 17; s++) {
var shp = s*50-(-180);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  <!-- римские под колонками 3-8 -->
}
 
tb+='b{font-size:18px; font-weight:bold;}';                      <!-- шрифт в значках без наведения -->
tb+='i{font-size:24px; font-style:normal; font-weight:bold;}';   <!-- шрифт в значках при наведении -->
 
for (var n= 0; n< 4; n++) {
var eltype = new Array(
"s",
"p",
"d",
"f"
);
tb+='.' + eltype[n] + '{background-image:url(img/el' + eltype[n] + '.gif); height:48px; width:48px; font-size:9px; background-position:center; cursor: pointer; background-repeat:no-repeat; z-index:2;}';
}
 
for (var l= 0; l< 4; l++) {
var eltypeb= new Array("sb","pb","db","fb");
 
tb+='.' + eltypeb[l] + '{background-image:url(img/el' + eltype[l] + 'b.gif); height:64px; width:64px; font-size:12px; background-position:center; cursor:pointer; background-repeat:no-repeat; z-index:0;';
if(navigator.userAgent.match(/msie/i))tb+=' filter:alpha(opacity=80);}';
else tb+=' opacity:0.8;}';                           <!-- прозрачность фона при наведении -->
}
 
 
tb+='</style></head><body bgcolor="#333333" onMouseMove="mov(event.clientX)">'; <!-- цвет вокруг таблицы -->
 
 
                                                                            <!-- вегунок вверху -->
tb+='<div id="bu" style="position: absolute; left: 0; top:0; z-index:2;"><input onMouseDown="sw=1" type="button" style="width: 24px; height:24px; cursor:e-resize; text-align: center; font-weight: bold;"><span id="tx" style="background-color:#000000; color:#CCCCCC; font-weight:bold; font-size:16px; border:none; width: 180px;"></span></div>';
 
                                                                         <!-- первая строка описания элемента -->
tb+='<div onMouseOver="wprev1(); fn2()" onClick="chval2(); fn2()" style="height:600px; width:1000px; z-index:1; background-color:#000000; position: absolute; left:0px; top:0px;"></div><table id="t1" style=" color:#000000; position:absolute; top: 20px; left: 130px; font-family: Times; z-index:2;"><tr><td id="name" rowspan="2" style="font-size: 32px;" width="250px"></td><td id="number" style="text-align: right; font-size: 16px;" width="100px"></td><td id="symbol" width="100px" rowspan="2" style="font-size: 32px;"></td></tr><tr><td id="mass" style="text-align: right; font-size: 16px;"></td></tr></table>';
 
                                                                        <!-- остальные строки описания элемента -->
tb+='<table id="t2" style=" color:#000000; position:absolute; top: 70px; left: 150px; font-size:16px; font-family: Times; z-index:2;"><tr><td>Открытие:</td><td id="disc" colspan="4"></td></tr><tr><td width="145px">Т.пл., K:</td><td id="mp" width="100px"></td><td width="180px">Т.кип., K:</td><td id="bp" width="100"></td><td width="200px"></td></tr><tr><td>ΔH<sub>исп</sub> , кДж/моль:</td><td id="dhb"></td><td>ΔH°<sub>обр</sub>(г.ф.) , кДж/моль:</td><td id="dhf"></td></tr><tr><td>ρ<sub>тв</sub> , кг/м<sup>3</sup></td><td id="dens"></td><td>ΔE (M→M<sup>+</sup>), кДж/моль:</td><td id="eion"></td></tr><tr><td colspan="2">Содержание в земной коре, 10<sup>4</sup> %:</td><td id="perc"></td></tr></table>';
 
for (var p= 1; p< 8; p++) {
var period = new Array(
"",
"1",
"2",
"3",
"4",
"5",
"6",
"7"
);                                                                         <!-- нумерация строк 1-7 -->
tb+='<div id="per' + p + '" class="period' + period[p] + '" style="width:20px; height:20px; z-index:2; font-size:16px; font-weight: bold; color:#666666;"><center>' + p + '</center></div>';
}
for (var gl= 1; gl< 19; gl++) {                                          <!-- нумерация столбцов 1-18 -->
tb+='<div id="grlg' + gl + '" class="grouplg' + gl + '" style="width:20px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + gl + '</center></div>';
}
var grs= new Array(
"",
"I",
"II",
"III",
"IV",
"V",
"VI",
"VII",
"<sup>|____</sup> VIII <sup>____|</sup>",
"I",
"II",
"III",
"IV",
"V",
"VI",
"VII",
"VIII"
);
for (var gs= 1; gs< 8; gs++) {                                              <!-- нумерация столбцов римскими 1-7 -->
tb+='<div id="grsh' + gs + '" class="groupsh' + gs + '" style="width:50px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
}                                                                           <!-- нумерация столбцов римскими 8 -->
tb+='<div id="grsh8" class="groupsh8" style="width:150px; height:20px; z-index:2; font-size:10pt; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
for (var gs= 9; gs< 17; gs++) {
var gsb = gs - 8;                                                           <!-- нумерация столбцов римскими 1-8 -->
tb+='<div id="grshb' + gsb + '" class="groupsh' + gs + '" style="width:50px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
}
 
var elpos = new Array(
"",
"s gr1 pe1",
"s gr18 pe1",
"s gr1 pe2",
"s gr2 pe2",
.
.
массивы
.
.
"[271]",
"[272]"
);
 
for (var i= 1; i< 112; i++) {                                              <!-- окошки таблицы без наведения -->
tb+='<div id="elem' + i +'" class="' + elpos[i] +'" onMouseOver="wprev(' + i + '); fn()" onClick="wprev2(' + i + '); chval(); fn()"><center style="padding: 2px">' + i + '<br><b>' + elsymff[i] + '</b><br>' + elmasff[i] + '</center></div>';                
       
                                                                          <!-- окошки таблицы при наведении -->
tb+='<div id="elemb' + i +'" class="' + elposb[i] +'"  onClick="selelem(' + i + '); chval()"><center style="padding: 3px">' + i + '<br><i>' + elsymff[i] + '</i><br>' + elmasff[i] + '</center></div>';
}                                                                          <!-- низпадающее меню -->
tb+='<select id="sss" style="border:none; width:150px; background-color:#000000; color:#CCCCC; cursor:crosshair; position:absolute; left:825px; top:0px; z-index:2;" onChange="p=1*this.value"><option value="0">Плотность</option><option value="3">Т. пл.</option><option value="6">Т. кип.</option><option value="9">ΔH испарения</option><option value="12">ΔH образования</option><option value="15">E ионизации</option></select><div style="color:#CCCCFF; cursor:pointer; font-family:Courier; font-size:24px; font-weight:bold; position:absolute; top:550px; left:925px; z-index:2;"><span onClick="light()" title="Подсветить все">∞ </span><span onClick="help()" title="Помощь"> ?</span></div><script language="JavaScript" src="table.js"></sc' + 'ript><div style="position:absolute; top:500px; left:750px; z-index:2;"><a href=http://www.ччч.яя><img src="http://www.ччч.яя/banners/140_60.gif" border="0" width="140" height="60" alt="химия "></a></div></body></html>';
document.open();
document.write(tb);
document.close();
}
 
onload = crtab;

(комментарии в скрипте мои). Всем спасибо за помощь.

@Alorian · 16.09.2010, 12:44

Вот основа работы скрипта:

Javascript

function crtab(){
    var tb='';
    document.open();
    document.write(tb);
    document.close();
}
 
onload = crtab;

Что тут делается?
0. Сразу после загрузки скрипта выполняется функция crtab. Далее в функции:
1. Создается пустая переменная.
2. В переменной создается весь html+css+js код таблицы или чего там. То есть по сути внутри этой переменной формируется еще одна html страница.
3. Открывается текущий документ и вся страница заменяется на содержимое переменной tb
4. Закрывается документ.

-----------------
Для работоспособности скрипта нужно:
1. Создать html страницу

HTML5

<html>
<head>
    <title>Загрузка...</title>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

2. Вместо script.js прописать путь до скрипта.
3. Убрать все свои комментарии, так как в js они по другому задаются — "//" либо "/* комментарий */"

Теоретически после этого должно заработать. Если работать не будет заархивируй и прикрепи к сообщению полный скрипт.

@Arrenius · 16.09.2010, 15:37 **[ТС]**

Сообщение от Alorian

Вот основа работы скрипта:

Javascript

function crtab(){
    var tb='';
    document.open();
    document.write(tb);
    document.close();
}
 
onload = crtab;

Что тут делается?
0. Сразу....

Спасибо большое, хоть немного разобрался как он работает!

Сообщение от Alorian

Теоретически после этого должно заработать. Если работать не будет заархивируй и прикрепи к сообщению полный скрипт.

Так он работет даже в таком виде как я описал в первом посте, только открывается на весь экран, своим бэкграундом застилает все что есть на странице и помещает таблицу в левый верхний угол что бы я не делал.....
У меня есть готовый сайт с готовым оформлением, мне жужно что бы эта таблица была в определенном месте и не закрывала бэкграундом весь сайт.
Комментарии исправил, спасибо.
На всякий случай полный скрипт прикрепил...

@Alorian · 16.09.2010, 16:11

Arrenius, в текущем виде он полностью заменяет всю твою страницу к которой прикреплен. Старая страница полностью удаляется, и на ее месте оказывается та которую создал скприпт.

Переделать скрипт впринципе возможно, вот внес нужные изменения, на первый взгляд все нормально. Если что то не так я думаю разберешься. Отладкой неохота заниматься.

Коротко суть:
1. Разбил переменную tb на две части.
а. В первой части то что вставляется в head
б. Во второй части то что будет вставляться в отдельный див.
2. В хтмл создал отдельный <div id="table"></div>. В него будет вставляться то что раньше вставлялось в боди.
3. Вставляю обе части переменной в нужные места.

Все измененные места прокоменнтированы.

переделанный скрипт

Javascript

function crtab(){
    var tb='';
/**************************/    
/* То что вставим в head */
/**************************/    
tb+='<style type="text/css">';
tb+='body{font-family:Times;}';
for (var j= 0; j< 2; j++) {
var lp = j*50-(-30);
var lpb = j*50-(-22);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
for (var j= 2; j< 12; j++) {
var lp = j*50-(-70);
var lpb = j*50-(-62);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
for (var j= 12; j< 18; j++) {
var lp = j*50-(-80);
var lpb = j*50-(-72);
var jv = j-(-1);
tb+='.gr' + jv + '{position:absolute; left:' + lp + 'px} ';
tb+='.bgr' + jv + '{position:absolute; left:' + lpb + 'px} ';
}
 
for (var m= 0; m< 14; m++) {
var lap = m*50-(-30);
var lapb = m*50-(-22);
var mv = m-(-1);
tb+='.gra' + mv + '{position:absolute; left:' + lap + 'px} ';
tb+='.bgra' + mv + '{position:absolute; left:' + lapb + 'px} ';
}
 
for (var k= 0; k< 7; k++) {
var tp = k*50-(-90);
var tpb = k*50-(-82);
var kv = k-(-1);
tb+='.pe' + kv + '{top:' + tp + 'px} ';
tb+='.bpe' + kv + '{top:' + tpb + 'px} ';
}
 
for (var k= 7; k< 9; k++) {
var tp = k*50-(-130);
var tpb = k*50-(-122);
var kv = k-(-1);
tb+='.pe' + kv + '{top:' + tp + 'px} ';
tb+='.bpe' + kv + '{top:' + tpb + 'px} ';
}
 
for (var pc= 0; pc< 7; pc++) {
var tp = pc*50-(-103);
var pcv = pc-(-1);
tb+='.period' + pcv + '{position:absolute; left:5px; top:' + tp + 'px} ';
}
 
tb+='.grouplg1{position:absolute; left:45px; top:70px}';                /* цифра над колонкой 1 */
 
tb+='.grouplg2{position:absolute; left:95px; top:120px}';               /* цифра над колонкой 2 */
 
for (var pl= 2; pl< 12; pl++) {
var glp = pl*50-(-85);
var plv = pl-(-1);
tb+='.grouplg' + plv + '{position:absolute; left:' + glp + 'px; top:220px}';  /* цифры над колонками 3-12 */
}
 
 
for (var pl= 12; pl< 18; pl++) {
var glp = pl*50-(-95);
var plv = pl-(-1);
tb+='.grouplg' + plv + '{position:absolute; left:' + glp + 'px; top:120px}'; /* цифры над колонками 3-17 */
}
 
tb+='.grouplg18{position:absolute; left:945px; top:70px}';                   /* цифра над колонкой 18 */
 
for (var s= 0; s< 2; s++) {
var shp = s*50-(-30);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  /* римские над колонками 1-2 */
}
 
for (var s= 2; s< 8; s++) {
var shp = s*50-(-70);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  /* римские над колонками 3-8 */
}
 
for (var s= 8; s< 10; s++) {
var shp = s*50-(-170);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  /* римские под колонками 1-2 */
}
 
for (var s= 10; s< 17; s++) {
var shp = s*50-(-180);
var sv = s-(-1);
tb+='.groupsh' + sv + '{position:absolute; left:' + shp + 'px; top:444px}';  /* римские под колонками 3-8 */
}
 
tb+='b{font-size:18px; font-weight:bold;}';                      /* шрифт в значках без наведения */
tb+='i{font-size:24px; font-style:normal; font-weight:bold;}';   /* шрифт в значках при наведении */
 
for (var n= 0; n< 4; n++) {
var eltype = new Array(
"s",
"p",
"d",
"f"
);
tb+='.' + eltype[n] + '{background-image:url(img/el' + eltype[n] + '.gif); height:48px; width:48px; font-size:9px; background-position:center; cursor: pointer; background-repeat:no-repeat; z-index:2;}';
}
 
for (var l= 0; l< 4; l++) {
var eltypeb= new Array("sb","pb","db","fb");
 
tb+='.' + eltypeb[l] + '{background-image:url(img/el' + eltype[l] + 'b.gif); height:64px; width:64px; font-size:12px; background-position:center; cursor:pointer; background-repeat:no-repeat; z-index:0;';
if(navigator.userAgent.match(/msie/i))tb+=' filter:alpha(opacity=80);}';
else tb+=' opacity:0.8;}';                           /* прозрачность фона при наведении */
}
 
 
tb+='</style>';
 
/* Вставляем в head то что насобирали выше */
document.getElementsByTagName("head")[0].innerHTML += tb;
 
/**********************************/    
/* То что вставим в отдельный див */
/**********************************/
 
tb='';
tb+='<div bgcolor="#333333" onMouseMove="mov(event.clientX)">'; /* цвет вокруг таблицы */
 
 
                                                                            /* вегунок вверху */
tb+='<div id="bu" style="position: absolute; left: 0; top:0; z-index:2;"><input onMouseDown="sw=1" type="button" style="width: 24px; height:24px; cursor:e-resize; text-align: center; font-weight: bold;"><span id="tx" style="background-color:#000000; color:#CCCCCC; font-weight:bold; font-size:16px; border:none; width: 180px;"></span></div>';
 
                                                                         /* первая строка описания элемента */
tb+='<div onMouseOver="wprev1(); fn2()" onClick="chval2(); fn2()" style="height:600px; width:1000px; z-index:1; background-color:#000000; position: absolute; left:0px; top:0px;"></div><table id="t1" style=" color:#000000; position:absolute; top: 20px; left: 130px; font-family: Times; z-index:2;"><tr><td id="name" rowspan="2" style="font-size: 32px;" width="250px"></td><td id="number" style="text-align: right; font-size: 16px;" width="100px"></td><td id="symbol" width="100px" rowspan="2" style="font-size: 32px;"></td></tr><tr><td id="mass" style="text-align: right; font-size: 16px;"></td></tr></table>';
 
                                                                        /* остальные строки описания элемента */
tb+='<table id="t2" style=" color:#000000; position:absolute; top: 70px; left: 150px; font-size:16px; font-family: Times; z-index:2;"><tr><td>Открытие:</td><td id="disc" colspan="4"></td></tr><tr><td width="145px">Т.пл., K:</td><td id="mp" width="100px"></td><td width="180px">Т.кип., K:</td><td id="bp" width="100"></td><td width="200px"></td></tr><tr><td>ΔH<sub>исп</sub> , кДж/моль:</td><td id="dhb"></td><td>ΔH°<sub>обр</sub>(г.ф.) , кДж/моль:</td><td id="dhf"></td></tr><tr><td>ρ<sub>тв</sub> , кг/м<sup>3</sup></td><td id="dens"></td><td>ΔE (M→M<sup>+</sup>), кДж/моль:</td><td id="eion"></td></tr><tr><td colspan="2">Содержание в земной коре, 10<sup>4</sup> %:</td><td id="perc"></td></tr></table>';
 
for (var p= 1; p< 8; p++) {
var period = new Array(
"",
"1",
"2",
"3",
"4",
"5",
"6",
"7"
);                                                                         /* нумерация строк 1-7 */
tb+='<div id="per' + p + '" class="period' + period[p] + '" style="width:20px; height:20px; z-index:2; font-size:16px; font-weight: bold; color:#666666;"><center>' + p + '</center></div>';
}
for (var gl= 1; gl< 19; gl++) {                                          /* нумерация столбцов 1-18 */
tb+='<div id="grlg' + gl + '" class="grouplg' + gl + '" style="width:20px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + gl + '</center></div>';
}
var grs= new Array(
"",
"I",
"II",
"III",
"IV",
"V",
"VI",
"VII",
"<sup>|____</sup> VIII <sup>____|</sup>",
"I",
"II",
"III",
"IV",
"V",
"VI",
"VII",
"VIII"
);
for (var gs= 1; gs< 8; gs++) {                                              /* нумерация столбцов римскими 1-7 */
tb+='<div id="grsh' + gs + '" class="groupsh' + gs + '" style="width:50px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
}                                                                           /* нумерация столбцов римскими 8 */
tb+='<div id="grsh8" class="groupsh8" style="width:150px; height:20px; z-index:2; font-size:10pt; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
for (var gs= 9; gs< 17; gs++) {
var gsb = gs - 8;                                                           /* нумерация столбцов римскими 1-8 */
tb+='<div id="grshb' + gsb + '" class="groupsh' + gs + '" style="width:50px; height:20px; z-index:2; font-size:13px; font-weight: bold; color:#666666;"><center>' + grs[gs] + '</center></div>';
}
 
var elpos = new Array(
"",
"s gr1 pe1",
"s gr18 pe1",
"s gr1 pe2",
"s gr2 pe2",
"p gr13 pe2",
"p gr14 pe2",
"p gr15 pe2",
"p gr16 pe2",
"p gr17 pe2",
"p gr18 pe2",
"s gr1 pe3",
"s gr2 pe3",
"p gr13 pe3",
"p gr14 pe3",
"p gr15 pe3",
"p gr16 pe3",
"p gr17 pe3",
"p gr18 pe3",
"s gr1 pe4",
"s gr2 pe4",
"d gr3 pe4",
"d gr4 pe4",
"d gr5 pe4",
"d gr6 pe4",
"d gr7 pe4",
"d gr8 pe4",
"d gr9 pe4",
"d gr10 pe4",
"d gr11 pe4",
"d gr12 pe4",
"p gr13 pe4",
"p gr14 pe4",
"p gr15 pe4",
"p gr16 pe4",
"p gr17 pe4",
"p gr18 pe4",
"s gr1 pe5",
"s gr2 pe5",
"d gr3 pe5",
"d gr4 pe5",
"d gr5 pe5",
"d gr6 pe5",
"d gr7 pe5",
"d gr8 pe5",
"d gr9 pe5",
"d gr10 pe5",
"d gr11 pe5",
"d gr12 pe5",
"p gr13 pe5",
"p gr14 pe5",
"p gr15 pe5",
"p gr16 pe5",
"p gr17 pe5",
"p gr18 pe5",
"s gr1 pe6",
"s gr2 pe6",
"f gra1 pe8",
"f gra2 pe8",
"f gra3 pe8",
"f gra4 pe8",
"f gra5 pe8",
"f gra6 pe8",
"f gra7 pe8",
"f gra8 pe8",
"f gra9 pe8",
"f gra10 pe8",
"f gra11 pe8",
"f gra12 pe8",
"f gra13 pe8",
"f gra14 pe8",
"d gr3 pe6",
"d gr4 pe6",
"d gr5 pe6",
"d gr6 pe6",
"d gr7 pe6",
"d gr8 pe6",
"d gr9 pe6",
"d gr10 pe6",
"d gr11 pe6",
"d gr12 pe6",
"p gr13 pe6",
"p gr14 pe6",
"p gr15 pe6",
"p gr16 pe6",
"p gr17 pe6",
"p gr18 pe6",
"s gr1 pe7",
"s gr2 pe7",
"f gra1 pe9",
"f gra2 pe9",
"f gra3 pe9",
"f gra4 pe9",
"f gra5 pe9",
"f gra6 pe9",
"f gra7 pe9",
"f gra8 pe9",
"f gra9 pe9",
"f gra10 pe9",
"f gra11 pe9",
"f gra12 pe9",
"f gra13 pe9",
"f gra14 pe9",
"d gr3 pe7",
"d gr4 pe7",
"d gr5 pe7",
"d gr6 pe7",
"d gr7 pe7",
"d gr8 pe7",
"d gr9 pe7",
"d gr10 pe7",
"d gr11 pe7"
);
var elposb = new Array(
"",
"sb bgr1 bpe1",
"sb bgr18 bpe1",
"sb bgr1 bpe2",
"sb bgr2 bpe2",
"pb bgr13 bpe2",
"pb bgr14 bpe2",
"pb bgr15 bpe2",
"pb bgr16 bpe2",
"pb bgr17 bpe2",
"pb bgr18 bpe2",
"sb bgr1 bpe3",
"sb bgr2 bpe3",
"pb bgr13 bpe3",
"pb bgr14 bpe3",
"pb bgr15 bpe3",
"pb bgr16 bpe3",
"pb bgr17 bpe3",
"pb bgr18 bpe3",
"sb bgr1 bpe4",
"sb bgr2 bpe4",
"db bgr3 bpe4",
"db bgr4 bpe4",
"db bgr5 bpe4",
"db bgr6 bpe4",
"db bgr7 bpe4",
"db bgr8 bpe4",
"db bgr9 bpe4",
"db bgr10 bpe4",
"db bgr11 bpe4",
"db bgr12 bpe4",
"pb bgr13 bpe4",
"pb bgr14 bpe4",
"pb bgr15 bpe4",
"pb bgr16 bpe4",
"pb bgr17 bpe4",
"pb bgr18 bpe4",
"sb bgr1 bpe5",
"sb bgr2 bpe5",
"db bgr3 bpe5",
"db bgr4 bpe5",
"db bgr5 bpe5",
"db bgr6 bpe5",
"db bgr7 bpe5",
"db bgr8 bpe5",
"db bgr9 bpe5",
"db bgr10 bpe5",
"db bgr11 bpe5",
"db bgr12 bpe5",
"pb bgr13 bpe5",
"pb bgr14 bpe5",
"pb bgr15 bpe5",
"pb bgr16 bpe5",
"pb bgr17 bpe5",
"pb bgr18 bpe5",
"sb bgr1 bpe6",
"sb bgr2 bpe6",
"fb bgra1 bpe8",
"fb bgra2 bpe8",
"fb bgra3 bpe8",
"fb bgra4 bpe8",
"fb bgra5 bpe8",
"fb bgra6 bpe8",
"fb bgra7 bpe8",
"fb bgra8 bpe8",
"fb bgra9 bpe8",
"fb bgra10 bpe8",
"fb bgra11 bpe8",
"fb bgra12 bpe8",
"fb bgra13 bpe8",
"fb bgra14 bpe8",
"db bgr3 bpe6",
"db bgr4 bpe6",
"db bgr5 bpe6",
"db bgr6 bpe6",
"db bgr7 bpe6",
"db bgr8 bpe6",
"db bgr9 bpe6",
"db bgr10 bpe6",
"db bgr11 bpe6",
"db bgr12 bpe6",
"pb bgr13 bpe6",
"pb bgr14 bpe6",
"pb bgr15 bpe6",
"pb bgr16 bpe6",
"pb bgr17 bpe6",
"pb bgr18 bpe6",
"sb bgr1 bpe7",
"sb bgr2 bpe7",
"fb bgra1 bpe9",
"fb bgra2 bpe9",
"fb bgra3 bpe9",
"fb bgra4 bpe9",
"fb bgra5 bpe9",
"fb bgra6 bpe9",
"fb bgra7 bpe9",
"fb bgra8 bpe9",
"fb bgra9 bpe9",
"fb bgra10 bpe9",
"fb bgra11 bpe9",
"fb bgra12 bpe9",
"fb bgra13 bpe9",
"fb bgra14 bpe9",
"db bgr3 bpe7",
"db bgr4 bpe7",
"db bgr5 bpe7",
"db bgr6 bpe7",
"db bgr7 bpe7",
"db bgr8 bpe7",
"db bgr9 bpe7",
"db bgr10 bpe7",
"db bgr11 bpe7"
 
);
var elsymff = new Array(
"",
"H",
"He",
"Li",
"Be",
"B",
"C",
"N",
"O",
"F",
"Ne",
"Na",
"Mg",
"Al",
"Si",
"P",
"S",
"Cl",
"Ar",
"K",
"Ca",
"Sc",
"Ti",
"V",
"Cr",
"Mn",
"Fe",
"Co",
"Ni",
"Cu",
"Zn",
"Ga",
"Ge",
"As",
"Se",
"Br",
"Kr",
"Rb",
"Sr",
"Y",
"Zr",
"Nb",
"Mo",
"Tc",
"Ru",
"Rh",
"Pd",
"Ag",
"Cd",
"In",
"Sn",
"Sb",
"Te",
"I",
"Xe",
"Cs",
"Ba",
"La",
"Ce",
"Pr",
"Nd",
"Pm",
"Sm",
"Eu",
"Gd",
"Tb",
"Dy",
"Ho",
"Er",
"Tm",
"Yb",
"Lu",
"Hf",
"Ta",
"W",
"Re",
"Os",
"Ir",
"Pt",
"Au",
"Hg",
"Tl",
"Pb",
"Bi",
"Po",
"At",
"Rn",
"Fr",
"Ra",
"Ac",
"Th",
"Pa",
"U",
"Np",
"Pu",
"Am",
"Cm",
"Bk",
"Cf",
"Es",
"Fm",
"Md",
"No",
"Lr",
"Rf",
"Db",
"Sg",
"Bh",
"Hs",
"Mt",
"Ds",
"Rg"
);
var elmasff = new Array(
"",
"1.008",
"4.003",
"6.941",
"9.012",
"10.811",
"12.011",
"14.007",
"15.999",
"18.998",
"20.18",
"22.99",
"24.305",
"26.982",
"28.086",
"30.974",
"32.066",
"35.453",
"39.948",
"39.098",
"40.078",
"44.956",
"47.88",
"50.942",
"51.996",
"54.938",
"55.847",
"58.933",
"58.69",
"63.546",
"65.39",
"69.723",
"72.61",
"74.922",
"78.96",
"79.904",
"83.8",
"85.468",
"87.62",
"88.906",
"91.224",
"92.906",
"95.94",
"[98]",
"101.07",
"102.906",
"106.42",
"107.868",
"112.411",
"114.82",
"118.71",
"121.75",
"127.6",
"126.905",
"131.29",
"132.905",
"137.327",
"138.906",
"140.115",
"140.908",
"144.24",
"[145]",
"150.36",
"151.965",
"157.25",
"158.925",
"162.5",
"164.93",
"167.26",
"168.934",
"173.04",
"174.967",
"178.49",
"180.948",
"183.85",
"186.207",
"190.2",
"192.22",
"196.08",
"196.967",
"200.59",
"204.383",
"207.2",
"208.98",
"[209]",
"[210]",
"[222]",
"[223]",
"226.025",
"227.028",
"232.038",
"231.036",
"238.029",
"237.048",
"[244]",
"[243]",
"[247]",
"[247]",
"[251]",
"[252]",
"[257]",
"[258]",
"[259]",
"[260]",
"[261]",
"[262]",
"[266]",
"[264]",
"[277]",
"[268]",
"[271]",
"[272]"
);
 
for (var i= 1; i< 112; i++) {                                              /* окошки таблицы без наведения */
tb+='<div id="elem' + i +'" class="' + elpos[i] +'" onMouseOver="wprev(' + i + '); fn()" onClick="wprev2(' + i + '); chval(); fn()"><center style="padding: 2px">' + i + '<br><b>' + elsymff[i] + '</b><br>' + elmasff[i] + '</center></div>';                
       
                                                                          /* окошки таблицы без наведения */
tb+='<div id="elemb' + i +'" class="' + elposb[i] +'"  onClick="selelem(' + i + '); chval()"><center style="padding: 3px">' + i + '<br><i>' + elsymff[i] + '</i><br>' + elmasff[i] + '</center></div>';
}                                                                          /* низпадающее меню */
tb+='<select id="sss" style="border:none; width:150px; background-color:#000000; color:#CCCCC; cursor:crosshair; position:absolute; left:825px; top:0px; z-index:2;" onChange="p=1*this.value"><option value="0">Плотность</option><option value="3">Т. пл.</option><option value="6">Т. кип.</option><option value="9">ΔH испарения</option><option value="12">ΔH образования</option><option value="15">E ионизации</option></select><div style="color:#CCCCFF; cursor:pointer; font-family:Courier; font-size:24px; font-weight:bold; position:absolute; top:550px; left:925px; z-index:2;"><span onClick="light()" title="Подсветить все">∞ </span><span onClick="help()" title="Помощь"> ?</span></div><script language="JavaScript" src="table.js"></sc' + 'ript><div style="position:absolute; top:500px; left:750px; z-index:2;"><a href=http://www.chemport.ru><img src="http://www.chemport.ru/banners/140_60.gif" border="0" width="140" height="60" alt="химия на ChemPort.Ru"></a></div></div>';
 
/***********************************************/
/* Вставляем то что получилось в отдельный див */
/***********************************************/
document.getElementById("table").innerHTML = tb;
}
 
onload = crtab;

@Arrenius · 17.09.2010, 10:47 **[ТС]**

Alorian, cпасибо огромное. Не знаю что из этого получится, но в любом случае благодарю за бесплатно потраченное собственное время!
В общих чертах понял то, что ты сделал, а в ньюансах буду разбираться. Мне этого на пару дней хватит.....а там если что еще постучу!)))

Добавлено через 17 часов 34 минуты

Сообщение от Alorian

Коротко суть:
1. Разбил переменную tb на две части.
а. В первой части то что вставляется в head
б. Во второй части то что будет вставляться в отдельный див.
2. В хтмл создал отдельный <div id="table"></div>. В него будет вставляться то что раньше вставлялось в боди.
3. Вставляю обе части переменной в нужные места.

Что то у меня не получается( Думал утро вечера мудреней....видимо эта поговорка не всегда работает. Alorian, ты не мог бы, если не сложно выложить свой index.html? Видимо я что то не то вставляю в head и body....(

@Alorian · 17.09.2010, 11:18

Того что я вчера выкладывал уже нет. Но вчера я скорее всего забыл упомнуть, что <div id="table"> должен быть с position:relative; Иначе все будет прижиматься к верхнему левому краю.
Вот из шаблона новый index.html:

HTML5

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Интерактивная Таблица Менделеева</title>
    <meta name="robots" content="index,follow" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="/favicon.ico" rel="shortcut icon" />
    <link media="all" rel="stylesheet" href="style.css" type="text/css" />
    <script src="body.js" type="text/javascript"></script>
    <script src="table.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
    <div id="middle">
        <div id="content">
            <h1>Интерактивная Таблица Менделеева</h1>
            Периодическая система химических элементов. Свойства химических элементов. Открытие элементов, температуры плавления и кипения, энтальпии испарения и образования, плотность, энергия ионизации, распространенность в природе.
            <div id="table" style="position:relative;"></div>
        </div>
    </div>
</div>
</body>
</html>

Так как все равно строгий доктайп не получится соблюдать, то написал стиль прямо в html.
По уму бы вынести все стили из html и js в отдельный файл, но это надо быть очень трудолюбивым.

@Arrenius · 17.09.2010, 11:59 **[ТС]**

Между "дивами" нужно что то ставить?

HTML5

1	<div id="table" style="position:relative;">???</div>

@Alorian · 17.09.2010, 12:05

Arrenius, без разницы. Во время работы скрипта все что было в диве исчезнет.
В прикрепленном файле то что в итоге у меня получилось. Вроде бы работает.

@Arrenius · 17.09.2010, 12:56 **[ТС]**

Блин, я в шоке (в хорошем смысле)! Заливаю твой архив в Денвер, открываю, не работает! Дело оказалось в том, что основной браузер у меня Firefox, а сайты денвера, что бы совсем не путаться в закладках, я открываю в Safari. Как только я открыл твой вариант в Firefox все заработало.....мой (изначальный) тоже). То, что скрипт не работает в Сафари я и предположить не мог.
Спасибо огромнейшее за помощь.
Кстати вдруг возникнут какие нибудь вопросы или задачи по химии, не стесняйся........ну чем богаты, тем и рады

@Alorian · 17.09.2010, 13:15

Не по теме:

Сообщение от Arrenius

Кстати вдруг возникнут какие нибудь вопросы или задачи по химии, не стесняйся.

Как варить синий мет? :) Шутка конечно же.

@Arrenius · 17.09.2010, 13:19 **[ТС]**

Сообщение от Alorian

Не по теме:

Как варить синий мет? :) Шутка конечно же.

Синий меД?) Добавь медного купороса........а потом дай теще)))

@Alorian · 17.09.2010, 13:22

Не по теме:

Именно меТ
http://ru.wikipedia.org/wiki/Метамфетамин
Синий мет варит учитель химии в сериале "Во все тяжкие"(Breaking bad)
Заканчиваю оффтопить)

@Arrenius · 17.09.2010, 13:24 **[ТС]**

Сообщение от Alorian

Не по теме:

Именно меТ
http://ru.wikipedia.org/wiki/Метамфетамин
Синий мет варит учитель химии в сериале "Во все тяжкие"(Breaking bad)
Заканчиваю оффтопить)

Еще когда шел в универ пообещал себе что таким никогда заниматься не буду!
Если что стучи в личку...

@Alorian · 17.09.2010, 13:28

Не по теме:

Сообщение от Arrenius

Еще когда шел в универ пообещал себе что таким никогда заниматься не буду!

Ладно, не удалась шутка, я думал ты смотрел сериал :)

Vovan-VE · 18.09.2010, 07:44

Комментарий модератора

Alorian, Arrenius, Прекращайте оффтипить. Личную переписку в ЛС.

@Arrenius · 21.09.2010, 10:01 **[ТС]**

Сообщение от Alorian

Во время работы скрипта все что было в диве исчезнет.
В прикрепленном файле то что в итоге у меня получилось. Вроде бы работает.

Alorian, тут такое дело) Я три дня продолбался с этой таблицей, уменьшил ее как и хотел, и вдруг выяснилось что этот скрипт не работает в Safari, Explorer, Crome может и еще где то, но думаю и этого достаточно. И это после того как ты его приобразовал, до этого во всех браузерах открывался.
Как ты понимаешь я не могу вывесить на сайт скрипт который не работает в таких распространенных браузерах, а очень хочется) Если есть возможность разберись пожалуйста, что мы такого внесли туда, что его не видят эти браузеры.

@Alorian · 21.09.2010, 12:23

Arrenius, ну я ж сказал, что отладкой неохота заниматься.
В IE и хроме не работает потому что в них нельзя присвоить innerHTML для head.
Как я уже говорил, по уму нужно все стили и js вынести в отдельные файлы и потом только подключать эти самые файлы в head с помощью appendChild например или сразу к исходному html подключать. Сейчас все стили пишутся прямо на этой же странице.

1. Подключи месиво из прикрепленного файла к странице как обычный css файл.
2. Удали код который заполняет переменную tb для вставки в head из скрипта. И сам код вставки в head тоже удали.

Должно помочь. Ничем другим помочь не смогу, довольно скучная задачка и ничего нового из нее я не узнаю.

@kbaht 30 / 24 / 7 Регистрация: 27.05.2010 Сообщений: 99
	16.09.2010, 09:40	2
	текст скрипта покажи 0

@Arrenius 6 / 6 / 1 Регистрация: 01.06.2010 Сообщений: 110
	17.09.2010, 10:47 [ТС]	8
	Alorian, cпасибо огромное. Не знаю что из этого получится, но в любом случае благодарю за бесплатно потраченное собственное время! В общих чертах понял то, что ты сделал, а в ньюансах буду разбираться. Мне этого на пару дней хватит.....а там если что еще постучу!))) Добавлено через 17 часов 34 минуты Сообщение от Alorian Коротко суть: 1. Разбил переменную tb на две части. а. В первой части то что вставляется в head б. Во второй части то что будет вставляться в отдельный див. 2. В хтмл создал отдельный <div id="table"></div>. В него будет вставляться то что раньше вставлялось в боди. 3. Вставляю обе части переменной в нужные места. Что то у меня не получается( Думал утро вечера мудреней....видимо эта поговорка не всегда работает. Alorian, ты не мог бы, если не сложно выложить свой index.html? Видимо я что то не то вставляю в head и body....( 0

@Arrenius 6 / 6 / 1 Регистрация: 01.06.2010 Сообщений: 110
	17.09.2010, 12:56 [ТС]	12
	Блин, я в шоке (в хорошем смысле)! Заливаю твой архив в Денвер, открываю, не работает! Дело оказалось в том, что основной браузер у меня Firefox, а сайты денвера, что бы совсем не путаться в закладках, я открываю в Safari. Как только я открыл твой вариант в Firefox все заработало.....мой (изначальный) тоже). То, что скрипт не работает в Сафари я и предположить не мог. Спасибо огромнейшее за помощь. Кстати вдруг возникнут какие нибудь вопросы или задачи по химии, не стесняйся........ну чем богаты, тем и рады 0

@Alorian
	17.09.2010, 13:15 #13
	Не по теме: Сообщение от Arrenius Кстати вдруг возникнут какие нибудь вопросы или задачи по химии, не стесняйся. Как варить синий мет? :) Шутка конечно же. 0

@Arrenius 6 / 6 / 1 Регистрация: 01.06.2010 Сообщений: 110
	17.09.2010, 13:19 [ТС]	14
	Сообщение от Alorian Не по теме: Как варить синий мет? :) Шутка конечно же. Синий меД?) Добавь медного купороса........а потом дай теще))) 0

@Alorian
	17.09.2010, 13:22 #15
	Не по теме: Именно меТ http://ru.wikipedia.org/wiki/Метамфетамин Синий мет варит учитель химии в сериале "Во все тяжкие"(Breaking bad) Заканчиваю оффтопить) 0

@Arrenius 6 / 6 / 1 Регистрация: 01.06.2010 Сообщений: 110
	17.09.2010, 13:24 [ТС]	16
	Сообщение от Alorian Не по теме: Именно меТ http://ru.wikipedia.org/wiki/Метамфетамин Синий мет варит учитель химии в сериале "Во все тяжкие"(Breaking bad) Заканчиваю оффтопить) Еще когда шел в универ пообещал себе что таким никогда заниматься не буду! Если что стучи в личку... 0

@Alorian
	17.09.2010, 13:28 #17
	Не по теме: Сообщение от Arrenius Еще когда шел в универ пообещал себе что таким никогда заниматься не буду! Ладно, не удалась шутка, я думал ты смотрел сериал :) 0

@Arrenius 6 / 6 / 1 Регистрация: 01.06.2010 Сообщений: 110
	21.09.2010, 10:01 [ТС]	19
	Сообщение от Alorian Во время работы скрипта все что было в диве исчезнет. В прикрепленном файле то что в итоге у меня получилось. Вроде бы работает. Alorian, тут такое дело) Я три дня продолбался с этой таблицей, уменьшил ее как и хотел, и вдруг выяснилось что этот скрипт не работает в Safari, Explorer, Crome может и еще где то, но думаю и этого достаточно. И это после того как ты его приобразовал, до этого во всех браузерах открывался. Как ты понимаешь я не могу вывесить на сайт скрипт который не работает в таких распространенных браузерах, а очень хочется) Если есть возможность разберись пожалуйста, что мы такого внесли туда, что его не видят эти браузеры. 0