<html>
<head>
<title>Перемещение</title>
</head>
<body id='bod'>
<img id='pic' src='http://pikchyriki.net/avatar/krutye/64/41.jpg' style='position:absolute'/>
<style>
.semi {
opacity: 0.5;
}
</style>
<script>
x=100;
y=50;
dx=10;
dy=10;
pic.style.top=y;
pic.style.left=x;
function Balloon(){
x+=dx;
y+=dy;
if(y+pic.clientHeight<bod.clientHeight){
pic.style.top=y;
}
else dy*=-1;
if(x+pic.clientWidth<bod.clientWidth){
pic.style.left=x;
}
else dx*=-1;
if(y>0){
pic.style.top=y;
}
else dy*=-1;
if(x>0){
pic.style.left=x;
}
else dx*=-1;
}
setInterval(Balloon, 5);
</script>
<p>
<table width="100%">
<tbody><tr>
<td valign="top" align="center" width="150">
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.top = parseInt(document.getElementById('div1').style.top)-30;">вверх</a><br> <br>
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)-30;">влево</a>
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)+30;">вправо</a><br> <br>
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.top = parseInt(document.getElementById('div1').style.top)+30;">вниз</a>
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.right=500;">По центру</a>
<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)+400;">За контентом</a><br> <br>
</td>
<td width="300"></td>
<td valign="top">
<div id="layer1" class='semi'>
Стихотворение <a href="http://referats.yandex.ru/pushkin/">им. А.С.Пушкина</a>
<p>
***
</p>
<p>
И по хребтам твоим направить<br>
Как, сердца исповедь любя<br>
Не удалось навек оставить
</p>
<p>
Послушай, гетман: для тебя<br>
В забвенье сердца улетает<br>
Вниманье дружбы возлюбя
</p>
</div>
<div id="layer2" class='semi'>
<p>
Увы, Татьяна увядает<br>
Самовластительный Злодей<br>
Пустынный воздух рассекает
</p>
<p>
Мученье модных рифмачей<br>
Из мира вытеснят и нас<br>
Подругой ветреной моей.
</p></td>
</tr>
</tbody></table>
</p>
<div style="position: absolute; top: 200; left: 30;" id="div1">
<center><img src="http://pikchyriki.net/avatar/krutye/64/41.jpg" width="150" height="150" border="0" class="semi"><br>
<style>
#layer1, #layer2 {
position: relative; /* Относительное позиционирование */
}
#layer1 {
font-size: 15px; /* Размер шрифта в пикселах */
color: #000080; /* Синий цвет текста */
}
#layer2{
top: -55px; /* Сдвигаем текст вверх */
left: 5px; /* Сдвигаем текст вправо */
color: #ffa500; /* Оранжевый цвет текста */
font-size:15px; /* Размер шрифта в пикселах */
}
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
</style>
</center>
</div>
</body>
</html>