Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2018, 22:05
Новичок на форуме
Отправить личное сообщение для ramzes1247622 Посмотреть профиль Найти все сообщения от ramzes1247622
 
Регистрация: 09.05.2018
Сообщений: 3

Картинка обрезает контент
Всем привет,вставил картинку,но когда нажимаю на кнопку перед текстом то она закрывает весь текст,а хотелось бы чтоб она была прозрачной,как установить такие кнопки перед и за текстом?
и если возможно кнопку стоп чтоб флаг останавливался
<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>&nbsp;
<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>&nbsp;<br>
		<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)-30;">влево</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)+30;">вправо</a><br>&nbsp;<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>&nbsp;<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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2018, 08:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от ramzes1247622
хотелось бы чтоб она была прозрачной
Вот...
http://htmlbook.ru/css/opacity

Сообщение от ramzes1247622
как установить такие кнопки перед и за текстом
Вот...
http://htmlbook.ru/css/z-index
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2018, 19:28
Новичок на форуме
Отправить личное сообщение для ramzes1247622 Посмотреть профиль Найти все сообщения от ramzes1247622
 
Регистрация: 09.05.2018
Сообщений: 3

<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>&nbsp;
<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>&nbsp;<br>
		<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)-30;">влево</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:void(0)" onclick="document.getElementById('div1').style.left = parseInt(document.getElementById('div1').style.left)+30;">вправо</a><br>&nbsp;<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>&nbsp;<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>
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2018, 19:29
Новичок на форуме
Отправить личное сообщение для ramzes1247622 Посмотреть профиль Найти все сообщения от ramzes1247622
 
Регистрация: 09.05.2018
Сообщений: 3

получилось как то так,но блин все как то запутано,что я теряюсь,может как то по другому возможно?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AngularJS Bootstrap динамический контент - проблемы с виджетами и связыванием vsimashko Angular.js 2 30.07.2014 19:04
Динамический контент Nanto Элементы интерфейса 2 18.04.2014 08:45
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41
Условные операторы, document.referrer и контент страницы Ministr Общие вопросы Javascript 4 05.03.2012 15:33
Opera 11.00 не подгружается картинка greatilya Opera, Safari и др. 1 27.12.2010 20:27