Комбинирование 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";
}