События - это, например, клик по кнопке, наведение мышки, загрузка страницы.
Обработчики могут обрабатывать эти события.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>События и их обработчики</title>
<script type="text/javascript">
// События - это, например, клик по кнопке, наведение мышки, загрузка страницы.
// Обработчики могут обрабатывать эти события.
// При клике на кнопку будет вызываться определенная функция.
function handlerClick(button) {
alert("Кликнули по кнопке '" + button.name + "' с надписью '" + button.value + "'");
}
var counter = 0;
function handlerMouseOver(element) {
counter++;
element.innerHTML = "Сюда навели мышкой " + counter + " раз";
}
</script>
</head>
<!-- Событие при загрузке страницы onload -->
<body onload="alert('Страница загружается')">
<input type="button" name="b" value="Кликни по мне" onclick="handlerClick(this)"/>
<br />
<!-- Событие при наведении мышки -->
<span onmouseover="handlerMouseOver(this)">Сюда навели мышкой 0 раз.</span>
<br />
<!--
Упражнение
Выведите на страницу через тег <img /> любое изображение.
Поставьте атрибут width со значением 100.
При наведении курсора на это изображение увеличьте width у изображения до 500.
При снятии курсора с изображения сделайте width обратно 100.
Сделайте аналогичную задачу, но с использованием клика. При первом клике увеличивайте,
при втором клике уменьшайте, при третьем увеличивайте, при четвёртом уменьшайте и так далее.
-->
<img src="avto2.jpg" width="100" onmouseover="this.width='500'" onmouseout="this.width='100'"/>
<br /> <br />
<img src="avto2.jpg" id="image" width="100" />
<script>
window.onload = function(){//Увеличение и уменьшение по клику картинки
var i = 0;
var image = document.getElementById('image');
image.onclick = function(){
if (i==0){
this.style.width= '500px';
this.style.border= '2px solid CornflowerBlue'; // добавили цвет рамки
i = 1;
}else if(i==1){
this.style.width= '100px';
this.style.border= 'none'; // убрали цвет рамки
i = 0;
}
}
};
</script>
</body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Можно подгружать другое фото шириной 500px.
Обработчики могут обрабатывать эти события.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>События и их обработчики</title>
<script type="text/javascript">
// События - это, например, клик по кнопке, наведение мышки, загрузка страницы.
// Обработчики могут обрабатывать эти события.
// При клике на кнопку будет вызываться определенная функция.
function handlerClick(button) {
alert("Кликнули по кнопке '" + button.name + "' с надписью '" + button.value + "'");
}
var counter = 0;
function handlerMouseOver(element) {
counter++;
element.innerHTML = "Сюда навели мышкой " + counter + " раз";
}
</script>
</head>
<!-- Событие при загрузке страницы onload -->
<body onload="alert('Страница загружается')">
<input type="button" name="b" value="Кликни по мне" onclick="handlerClick(this)"/>
<br />
<!-- Событие при наведении мышки -->
<span onmouseover="handlerMouseOver(this)">Сюда навели мышкой 0 раз.</span>
<br />
<!--
Упражнение
Выведите на страницу через тег <img /> любое изображение.
Поставьте атрибут width со значением 100.
При наведении курсора на это изображение увеличьте width у изображения до 500.
При снятии курсора с изображения сделайте width обратно 100.
Сделайте аналогичную задачу, но с использованием клика. При первом клике увеличивайте,
при втором клике уменьшайте, при третьем увеличивайте, при четвёртом уменьшайте и так далее.
-->
<img src="avto2.jpg" width="100" onmouseover="this.width='500'" onmouseout="this.width='100'"/>
<br /> <br />
<img src="avto2.jpg" id="image" width="100" />
<script>
window.onload = function(){//Увеличение и уменьшение по клику картинки
var i = 0;
var image = document.getElementById('image');
image.onclick = function(){
if (i==0){
this.style.width= '500px';
this.style.border= '2px solid CornflowerBlue'; // добавили цвет рамки
i = 1;
}else if(i==1){
this.style.width= '100px';
this.style.border= 'none'; // убрали цвет рамки
i = 0;
}
}
};
</script>
</body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Можно подгружать другое фото шириной 500px.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="cover.jpg"
id="image" width="100" />
<script>
// фото cover.jpg - 100px, фото
cover500.jpg - 500px
window.onload =
function(){//Увеличение и уменьшение по клику
картинки
var i = 0;
var image =
document.querySelector('#image');
image.onclick = function(){
if (i==0){
this.src='cover500.jpg';
i = 1;
}else if(i==1){
this.src='cover.jpg';
i = 0;
}
}
};
</script
</body>
</html>
а если без getElementById и без style
ОтветитьУдалитьно с использование функции, (если следовать по урокам)
Здравствуйте! Я еще тот спец по JS. Здесь сама занималась по урокам в этом случае. Я сейчас озабочена разработкой приложением на PHP. JS использую редко, как вкрапление во фронт-энд. Опубликовала еще один вариант. См. выше.
Удалить