-
Информация о материале
-
-
Просмотров: 272
JavaScript: Основы событий мыши
Интерактив в html-странице: Открой коробочку
Картинки коробочек
index.htm
<html>
<head>
<title>Динамический HTML</title>
</head>
<body>
<h1>Наведи курсор мышки на коробочку</h1>
<img src="/img/box_closed.gif"
onMouseOver="this.src='img/box_opened.gif'"
onMouseOut="this.src='img/box_closed.gif'"
onMouseDown="this.src='img/box_click.gif'"
onMouseUp="this.src='img/box_upsidown.gif'">
</body>
</html>
Интерактив в html-странице - показать скрытый текст
index.htm
<html>
<head>
<title>Динамический HTML.</title>
<script src="/func.js"></script>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<a href="#"
onClick="show('details');return false;">
Показать детали
</a>
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.
</div>
</body>
</html>
style.css
.hidden {
display:none;
}
func.js
function show(name)
{
var elem = document.getElementById(name);
if(elem)
elem.style.display = "block";
}
box_img.zip