AJAX загрузка
home

Комбинирование HTML DOM, JavaScript и HTML называют DHTML.

Анимированные кнопки

Комбинирование HTML DOM, JavaScript и HTML называют DHTML.

Использование DHTML предоставляет множество новых возможностей при создании страниц, например создание анимированных кнопок:

Пример 

function start(){
   document.getElementById("elp").src="button2.gif";
}
function stop(){
   document.getElementById("elp").src="button1.gif";
}
function go(){
   document.location.assign("https://www.wisdomweb.ru");
}
....
<img src="button1.gif" id="elp" onmouseover="start()" onmouseout="stop()" 
onclick="go()" />
Попробовать в редакторе

Анимация

Используя выполнение кода по расписанию и возможности DHTML Вы можете создавать настоящую анимацию на своих страницах.

Пример 

setTimeout("document.getElementById("movesq").style.top="10px"",1000);
setTimeout("document.getElementById("movesq").style.top="20px"",2000);
setTimeout("document.getElementById("movesq").style.top="30px"",3000);
setTimeout("document.getElementById("movesq").style.top="40px"",4000);
setTimeout("document.getElementById("movesq").style.left="100px"",5000);
setTimeout("document.getElementById("movesq").style.top="60px"",6000);
setTimeout("document.getElementById("movesq").style.backgroundColor="green"",7000);
setTimeout("document.getElementById("movesq").style.top="90px"",8000);
setTimeout("document.getElementById("movesq").style.left="120px"",9000);
setTimeout("document.getElementById("movesq").style.left="30px"",10000);
setTimeout("document.getElementById("movesq").style.top="0px"",11000);
setTimeout("document.getElementById("movesq").style.backgroundColor="red"",12000);
Попробовать в редакторе
Быстрый просмотр

Выпадающие меню

Также комбинируя эти возможности Вы можете создавать выпадающие меню.

Выпадающее меню является очень удобным и часто используемым элементом сайта.

Пример 

function starteng(){
   document.getElementById("eng").style.display="block";
}
function stopeng(){
   document.getElementById("eng").style.display="none";
}
function startde(){
   document.getElementById("de").style.display="block";
}
function stopde(){
   document.getElementById("de").style.display="none";
}
function startrus(){
   document.getElementById("rus").style.display="block";
}
function stoprus(){
   document.getElementById("rus").style.display="none";
}
function startdia(){
   document.getElementById("dia").style.display="block";
}
function stopdia(){
   document.getElementById("dia").style.display="none";
}
Попробовать в редакторе