1 (изменено: stir, 2012-02-01 12:21:55)

Тема: HTML: DOM 1,2...3,4?

Есть такой вот код HTML (прелоадер), пытаюсь его переработать под себя, т.к. у меня получились недочеты - резкая смена картинки, отсутствие затемнения, раздвиг таблицы при наведении нужной ссылки:

<table width="100%" BORDER=0 COLS=0 cellpadding=0>

<TR>
    <TD><CENTER>
    <img src="img/0.png">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','img/2.png' ,1)"><img src="img/1.png " name="Image2"  border="0" id="Image1" /></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','img/4.png' ,1)"><img src="img/3.png " name="Image4"  border="0" id="Image3" /></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','img/6.png' ,1)"><img src="img/5.png " name="Image6"  border="0" id="Image5" /></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','img/8.png' ,1)"><img src="img/7.png " name="Image8"  border="0" id="Image7" /></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','img/10.png' ,1)"><img src="img/9.png " name="Image10"  border="0" id="Image9" /></a>
    </CENTER></TD>
</TR>

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

С хтмл проблемм нет, код я свой привел. При разборе же исходного скрипта столкнулся с неизвестными конструкциями, точнее с отсутствием информации по 3 уровню объектной модели.. потому разобрать по косточкам затрудняюсь из-за:
- MM_sr /a=document.MM_sr/
- oSrc
- MM_p
- d.all /x=d.all[n], х-интересная переменная, т.к. all в переводе все.../
- d.layers

и т.д., получается, что имеющаяся информация у меня не полная и о 3 доме нет ничего - объект document обладает мне неизвестными свойствами, а автор активно использует эту модель в приведенном коде.. Также есть комент 4.01, это новое в DOM - DOM 4 свободно работает со слоями и объектами - файлами?
Если искомое есть команды яваскрипта, то я их тоже не знаю.. в справочнике в явном виде они отсутствуют... голова уже идет кругом - я чего то просто не вижу, гляжу и не вижу...
Пните в нужное русло, где искать инфу, весь инет содержит примеры с 1 и 2 домом..

Эту тему можно связать с моим топиком -http://forum.script-coding.com/viewtopic.php?id=6746.
Нашел пока что вот это - http://xerces.apache.org/xerces2-j/samp … .html#DOM3 и http://xmlhack.ru/texts/03/dom.level.th … three.html, но по полученной информации DOM3 связан с Java, а не с JS.

Любители построили Ковчег, а профессионалы - Титаник.

2 (изменено: stir, 2012-02-01 13:22:24)

Re: HTML: DOM 1,2...3,4?

Нашел ссылку на Имена устройств отображения, а там искомое слово - all. ВсЁ! ура - есть направление поиска!! Спасибо справочнику Ю. Лукач «Справочник Веб-разработчика», который был под рукой... Значит нужное направление - ДОМ, ХТМЛ.

Любители построили Ковчег, а профессионалы - Титаник.

3

Re: HTML: DOM 1,2...3,4?

ВсЁ!!! До меня дошло!!! Ура!!
d=document - это просто переменной присвоили текстовое значение, и в дальнейшем чтобы не писать длинные имена (текст) используется значение переменной... уф.. отдыхать надо иногда.. .
теперь мне весь код понятен, а то ум за разум заходить стал... всем смотревшим спасибо, но могли бы и пару фраз с намеками написать - быстрее бы догадался что туплю и вас пытаюсь мучить, .

После реализации на досуге идеи - постараюсь отписаться в теме, что получилось из задуманного.

Любители построили Ковчег, а профессионалы - Титаник.

4

Re: HTML: DOM 1,2...3,4?

d=document

Для меня это норма.
var d=document;//глобально

d.all

Не использую это даже в заведомо ослиных скриптах, только ДОМ, а также пишу только кроссбраузерно.
Во первых чтобы нюх не потерять.
Во вторых разные отладчики одну ошибку преподносят немного по разному. Мне это помогает.
Только такой способ требует кучу лишнего времени. Большую кучу.


Судя по тегу центр, код очень древний.
Таблица есть объект, потому на любую ячейку есть своя ссылка, я бы делал без ИД.
По онлоаду навесил бы события скриптом.

Это моё ИМХО.

5 (изменено: stir, 2012-02-08 06:16:29)

Re: HTML: DOM 1,2...3,4?

Да.. скрипты древние .. где-то 2004 годов.. спасибо поиску - нашел нужное и переработал под свои нужды.
Ниже приведу скрипт, точнее заготовку (у меня она работает) под такую идею: Изначально меню выполнено в виде картинок. При вхождение в нужную область меню (картинку) она становится иной, т.е. производится ее замена на другую (по вашему вкусу, у меня она изменяет и размеры и содержимое), причем одновременно с этим происходит замена остальных неактивных картинок -областей на другие картинки (я их сделал затененными и меньшими по ширине). Тем самым создался эффект раздвижки нужного меню, не изменяя общие габариты.
В будущем попробую сделать эффект плавной замены картинок или их проявления.. пока не знаю точно, что можно предложить в довесок.

Как и обещал вот код внедренный в мою страничку ХТМЛ:

<script type="text/JavaScript">
var imgLoaded=0 ;
var lnk='img/' ;
var v=parseInt(navigator.appVersion);

if (document.images) {

I1On=new Image();
I1Off=new Image();
I1s=new Image();
I1On.src=lnk+"a1.GIF" ;
I1Off.src=lnk+"1.GIF";
I1s.src=lnk+"b1.GIF";

I2On=new Image();
I2Off=new Image();
I2s=new Image();
I2On.src=lnk+"a2.GIF";
I2Off.src=lnk+"2.GIF";
I2s.src=lnk+"b2.GIF";

I3On=new Image();
I3Off=new Image();
I3s=new Image();
I3On.src=lnk+"a3.GIF" ;
I3Off.src=lnk+"3.GIF";
I3s.src=lnk+"b3.GIF";

I4On=new Image();
I4Off=new Image();
I4s=new Image();
I4On.src=lnk+"a4.GIF" ;
I4Off.src=lnk+"4.GIF";
I4s.src=lnk+"b4.GIF";

I5On=new Image();
I5Off=new Image();
I5s=new Image();
I5On.src=lnk+"a5.GIF" ;
I5Off.src=lnk+"5.GIF";
I5s.src=lnk+"b5.GIF";

imgLoaded=1;
}

function Over(h,Img){if (3<=v) {
if(imgLoaded==0) return;
   if (h==Img) {document[img].src=eval(Img+"On.src")}
   else document[img].src=eval(Img+"s.src")
}}
function mOver(){for(var i=1;i<mOver.arguments.length;i++)Over(mOver.arguments[0],mOver.arguments[i])}
function Out(Img){if (3<=v) {if(imgLoaded==0) return;document[img].src=eval(Img+"Off.src")}}
function mOut(){for(var i=0;i<mOut.arguments.length;i++)Out(mOut.arguments[i])}
</script>



<table BORDER=0 COLS=0 cellpadding=0>
<TR>
    <TD><CENTER>
    <img src="images/pt.gif" width=30>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png" border="0">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#1" onMouseOver="mOver('I1','I1','I2', 'I3', 'I4', 'I5')" onMouseOut="mOut('I1','I2', 'I3', 'I4', 'I5')"><img src="img/1.GIF" name="I1"  border="0"></a>
    </CENTER></TD>
    <TD><CENTER>    
    <TD><CENTER>
    <img src="img/0.png"  border="0">
    </CENTER></TD>    
    <TD><CENTER>
    <a href="#2" onMouseOver="mOver('I2','I1','I2', 'I3', 'I4', 'I5')" onMouseOut="mOut('I1','I2', 'I3', 'I4', 'I5')"><img src="img/2.GIF" name="I2" border="0"></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png"  border="0">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#3" onMouseOver="mOver('I3','I1','I2', 'I3', 'I4', 'I5')" onMouseOut="mOut('I1','I2', 'I3', 'I4', 'I5')"><img src="img/3.GIF" name="I3"  border="0"></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png"  border="0">
    </CENTER></TD>    
    <TD><CENTER>
    <a href="#4" onMouseOver="mOver('I4','I1','I2', 'I3', 'I4', 'I5')" onMouseOut="mOut('I1','I2', 'I3', 'I4', 'I5')"><img src="img/4.GIF" name="I4"  border="0"></a>
    </CENTER></TD>
    <TD><CENTER>
    <img src="img/0.png"  border="0">
    </CENTER></TD>
    <TD><CENTER>
    <a href="#5" onMouseOver="mOver('I5','I1','I2', 'I3', 'I4', 'I5')" onMouseOut="mOut('I1','I2', 'I3', 'I4', 'I5')"><img src="img/5.GIF" name="I5"  border="0"></a>
    </CENTER></TD>
</TR>
 </table>

Лично мною изменены лишь функции - Over,mOver и то какие аргументы-переменные должны быть переданы в mOver.
Обычно эта тема очень сильно востребована начинающими изучение скриптов в наглядных примерах, впрочем и для простого применения этот код тоже подходит всем.
Если будут желающие его улучшить - прошу публиковать свои корректировки кода, ваши коррективы будут в помощь страждующим.

Любители построили Ковчег, а профессионалы - Титаник.

6

Re: HTML: DOM 1,2...3,4?

В моем случае картинки будут с расширением GIF, т.к. png почти в 2 раза весят больше. Это возможно важно, т.к. функции прелоада картинок в скрипте не предусмотрено в ввиду малой эффективности в конкретном случае. Для сравнения 10 и 20 Кб при загрузке каждой из моих картинок визуально грузятся одинаково быстро.

Любители построили Ковчег, а профессионалы - Титаник.

7

Re: HTML: DOM 1,2...3,4?

Уж не это ли изобретаем?
И это.

8 (изменено: Rumata, 2012-02-08 14:17:05)

Re: HTML: DOM 1,2...3,4?

Любитель, похоже на то.

stir, не надо заниматься преждевременной оптимизацией. Не создавайте проблемы себе и пользователям. По пунктам.
1. Если хотите динамически создавать меню вспомните про массивы - вы создаете меню из 5 пунктов и уже наплодили 15 переменных. Что будет при увеличении количества пунктов меню?. Итог: вообще не делайте так.
2. Меню - это элемент интерфейса и часть страницы, она должна быть написана на HTML. Разнообразные эффекты и красивости достигаются с применением каскадных стилей и, при необходимости, программирования на JavaScript.

Вот идеальное меню.


<ul class="menu">
<li class="menu-item"><a class="menu-link" href="">menu 1</a></li>
<li class="menu-item"><a class="menu-link" href="">menu 2</a></li>
<li class="menu-item"><a class="menu-link" href="">menu 3</a></li>
</ul>

Пользователь его увидит всегда - будь то графический, либо текстовый браузер, включены у него стили, картинки, скрипты или нет. Использованная пара тегов UL/LI - ненумерованный список - прекрасно отражает структуру - это меню. С ним можно делать все что угодно.

А вот правила, которые видоизменят его - три белых квадратика 100х100, меняющие цвет на серый при наведении мышки. Уверен, и Вашу задачу можно решить аналогично (хотя вставка небольшой порции JavaScript может потребоваться). Но подумайте - так ли это надо?


<style type="text/css">

.menu, 
.menu-item	{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu-item	{
	float: left;
}

.menu-item .menu-link	{
	border: 1px solid #ccc;
	display: inline-block;
	height: 100px;
	text-align: center;
	width: 100px;
}

.menu-item .menu-link:hover	{
	background-color: #ccc;
	border: 1px solid #999;
}

</style>
( 2 * b ) || ! ( 2 * b )

9 (изменено: Любитель, 2012-02-08 15:11:09)

Re: HTML: DOM 1,2...3,4?

В моем случае картинки будут с расширением GIF, т.к. png почти в 2 раза весят больше.

Вот только что вспомнил про эту статейку, не панацея, но примерно 50/50 может помочь избежать тяжеловесных *.PNG.
Сам пробовал, получается, правда возни много, но для веба вес картинок актуален.

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

10

Re: HTML: DOM 1,2...3,4?

Любая ваша информация мне была полезна, но я хотел сделать аналог меню главной страничке сайта (http://transkontinent.com/) с использованием технологии на JavaScript без использования флешанимации, и у меня это получилось, всё работает.

Динамические меню меня не интересовали, о них я бы не стал беспокоить форумчан.

Насчет тяжеловесности передачи кода, то передача 15-20 названий переменных не забивает канал передачи, как передача самих аргументов - картинок. Они займут в любом случае львиную долю переданной информации, а при существующих скоростях интернет соединений на это обращать внимания особо не стоит. Т.К. я придерживаюсь золотого правила сайтостроения - ЧЕМ МЕНЬШЕ, ТЕМ ЛУЧШЕ, изреченного еще давно одним мудрым американцем... Мои картинки не будут весить более 150 кб.

Насчет слова НАДО - это именно то слово, которое сподвигло к созданию этой темы несколько дней назад. Надо было сделать аналог красивого меню и возникли трудности (правда как я выяснил про них - это первый класс вторая четверть, ), теперь меню есть и работает. И я действительно хотел написать код как можно короче и сделать все как можно приемлемо, но получилось пока что то как получилось, в настоящее время меня все устраивает.

Любители построили Ковчег, а профессионалы - Титаник.