Добавил:
Lidoooo
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:HTML / html
.txt 1 пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
background-size: auto;
background-color: rgb(97, 151, 81);
}
</style>
<script type="text/javascript">
function setNewImage()
{ document.getElementById("img1").src="second.png";
}
function setOldImage()
{ document.getElementById("img1").src="first.png";
}
</script>
</head>
<body>
<center>
<h1>MouseOver and MouseOut</h1>
<img id="img1"
onmouseover="setNewImage()"
onmouseout="setOldImage()"
src="first.png" width="300"/>
</center>
</body>
</html>
2 пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
background-size: auto;
background-color: rgb(146, 235, 118);
}
</style>
<script type="text/javascript">
function chpict()
{
var d=document
var k=d.pm1.src
d.pm1.src=d.pm2.src
d.pm2.src=k
}
</script>
</head>
<body >
<h3>change photos</h3>
<IMG src="first.png" name=pm1 >
<IMG src="second.png" name=pm2 >
<FORM name="form1">
<input type="button" value="change" onclick="chpict()">
</FORM>
</body>
</html>
3 пример
<!DOCTYPE html>
<html>
<body >
<h1><b><center>slide show every 2 second</center></b></h1>
</body>
<head>
<meta charset="UTF-8">
<div class="slider">
<div id="img">
<img src="forth.png">
</div>
</div>
<script>
var img = document.getElementById('img');
var images = ['first.png', 'second.png','third.png', 'forth.png'];
var x =0;
function slide(){
if(x < images.length){
x=x+1;
}else {
x=1;
}
img.innerHTML = "<img src="+images[x-1]+">";
}
setInterval(slide,2000);
</script>
<style>
.slider{
width: 300px;
height: 300px;
box-sizing: border-box;
box-shadow: 5px 5px 10px grey;
margin: 20px auto;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
background-size: auto;
background-color: rgb(97, 151, 81);
}
</style>
<script type="text/javascript">
function setNewImage()
{ document.getElementById("img1").src="second.png";
}
function setOldImage()
{ document.getElementById("img1").src="first.png";
}
</script>
</head>
<body>
<center>
<h1>MouseOver and MouseOut</h1>
<img id="img1"
onmouseover="setNewImage()"
onmouseout="setOldImage()"
src="first.png" width="300"/>
</center>
</body>
</html>
2 пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
background-size: auto;
background-color: rgb(146, 235, 118);
}
</style>
<script type="text/javascript">
function chpict()
{
var d=document
var k=d.pm1.src
d.pm1.src=d.pm2.src
d.pm2.src=k
}
</script>
</head>
<body >
<h3>change photos</h3>
<IMG src="first.png" name=pm1 >
<IMG src="second.png" name=pm2 >
<FORM name="form1">
<input type="button" value="change" onclick="chpict()">
</FORM>
</body>
</html>
3 пример
<!DOCTYPE html>
<html>
<body >
<h1><b><center>slide show every 2 second</center></b></h1>
</body>
<head>
<meta charset="UTF-8">
<div class="slider">
<div id="img">
<img src="forth.png">
</div>
</div>
<script>
var img = document.getElementById('img');
var images = ['first.png', 'second.png','third.png', 'forth.png'];
var x =0;
function slide(){
if(x < images.length){
x=x+1;
}else {
x=1;
}
img.innerHTML = "<img src="+images[x-1]+">";
}
setInterval(slide,2000);
</script>
<style>
.slider{
width: 300px;
height: 300px;
box-sizing: border-box;
box-shadow: 5px 5px 10px grey;
margin: 20px auto;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
</html>
Соседние файлы в папке HTML