Картинка обрезает контент
Всем привет,вставил картинку,но когда нажимаю на кнопку перед текстом то она закрывает весь текст,а хотелось бы чтоб она была прозрачной,как установить такие кнопки перед и за текстом?
и если возможно кнопку стоп чтоб флаг останавливался :help: <html> <head> <title>Перемещение</title> </head> <body id='bod'> <img id='pic' src='http://pikchyriki.net/avatar/krutye/64/41.jpg' style='position:absolute' /> [JS]<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>[/JS] <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"> Стихотворение <a href="http://referats.yandex.ru/pushkin/">им. А.С.Пушкина</a> <p> *** </p><p> И по хребтам твоим направить<br> Как, сердца исповедь любя<br> Не удалось навек оставить </p><p> Послушай, гетман: для тебя<br> В забвенье сердца улетает<br> Вниманье дружбы возлюбя </p><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="191" height="253" border="0" alt=""><br> Герб</center> </div> </body> </html> |
Цитата:
http://htmlbook.ru/css/opacity Цитата:
http://htmlbook.ru/css/z-index |
<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> |
получилось как то так,но блин все как то запутано,что я теряюсь,может как то по другому возможно?
|
Часовой пояс GMT +3, время: 01:14. |