[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Выравнивание объекта относительно левого в. угла
Форум PHP программистов > JavaScript
sx000
9.11.2011 - 22:03
<html>
<head>
<title>Untitled</title>
<script type=text/javascript language=JavaScript>
<!--
function showmov() {
		document.getElementById('q2').style.display='';
		}
		function noneshowmov() {
		document.getElementById('q2').style.display='none';
		}
//-->
</script>

<style type="text/css">
#q2 {
      border-color: red green blue orange;
      border-style:solid;
      border-width:30px;
      width:0;
      height:0;
      top: 200px;
      position:absolute;
}
</style>

</head>
<body>
<div id="q2" style="display:none"></div>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 0</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 1</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 2</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 3</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 4</a><br>
</body>
</html>


Есть код, при наведении на Tra lo lo 0 ... будет появляется объект q2 а когда мышку уводим объект исчезает. Мне нужно чтоб он появлялся выравненный относительно объекта на который навели мышку. Ну допустим навели на Tra lo lo 0 значит этот квадрат должен появиться выравненный относительно строки Tra lo lo 0 ... как это сделать?



Спустя 1 минута, 56 секунд (9.11.2011 - 21:04) redreem написал(а):
есть у объектов offsetTop и offsetLeft. только вот в разных браузерах они вычисляются от разных родителей. в нете легко найти кроссбраузерные решения на этот счет.

Спустя 2 минуты, 35 секунд (9.11.2011 - 21:07) sx000 написал(а):
только так мона сделать?

Спустя 2 часа, 12 минут, 52 секунды (9.11.2011 - 23:20) Winston написал(а):
Так
Свернутый текст
<html>
<head>
<title>Untitled</title>
<script type=text/javascript language=JavaScript>
<!--
function showmov() {
		document.getElementById('q2').style.display='';
		document.getElementById('q2').style.top = event.clientY+'px';
		}
		function noneshowmov() {
		document.getElementById('q2').style.display='none';
		}
//-->
</script>

<style type="text/css">
#q2 {
      border-color: red green blue orange;
      border-style:solid;
      border-width:30px;
      width:0;
      height:0;
      /*top: 200px;*/
      left: 90px;
      position:absolute;
}
</style>

</head>
<body>
<div id="q2" style="display:block"></div>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 0</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 1</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 2</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 3</a><br>
<a href=# onMouseOver="showmov()"; onMouseOut="noneshowmov()";>Tra lo lo 4</a><br>
</body>
</html>

Спустя 36 минут, 9 секунд (9.11.2011 - 23:56) sergeiss написал(а):
По-моему, можно еще при заходе в функцию showmov объявить текущий элемент родителем нового, показываемого объекта. Тогда можно будет задать координаты относительно него, что сделать элементарно.
Вот только над кодом думать сейчас не хочу, т.п. спать хочу smile.gif Если до утра никто не ответит, то я напишу.

Спустя 9 часов, 32 минуты, 27 секунд (10.11.2011 - 09:29) sergeiss написал(а):
Вот оно, о чем я говорил: работает без проблем

JS:
var obj;

function showmov( curr_parent, obj_id )
{
  obj=document.getElementById( obj_id );

  document.getElementById(curr_parent).appendChild( obj );

  obj.style.display='block';
}

function hidemov( curr_parent, obj_id )
{
  obj.style.display='none';
}


HTML
<div id="div_test" onmousemove="showmov( 'div_test', 'ghost' )" onmouseout="hidemov( 'div_test', 'ghost' ) " style="position:relative; width:200px; height:100px; background-color:#99FF33">
</div>
<div id="div_test2" onmousemove="showmov( 'div_test2', 'ghost' )" onmouseout="hidemov( 'div_test2', 'ghost' ) " style="position:relative; width:200px; height:100px; background-color:#FF9966">
</div>

<img id="ghost" src="../pictures/test/4.gif" style="position:relative; display:none; left:5px; top:5px" />

Спустя 4 часа, 27 минут, 46 секунд (10.11.2011 - 13:56) sx000 написал(а):
<html>
<head>
<title>Untitled</title>
<script type=text/javascript language=JavaScript>
<!--

var flashVideoPlayer;

function initialize(){
		var isIE = navigator.appName.indexOf("Microsoft") != -1;
		flashVideoPlayer = (isIE)?window['ff']:document['ff'];
		}

var obj;

function flash_in(url_1, url_2) {
		flashVideoPlayer.flash_in(url_1, url_2);
		}
function flash_out() {
		flashVideoPlayer.flash_out();
		}


function showmov( curr_parent, obj_id, url_1, url_2 ) {
		obj=document.getElementById( obj_id );
		document.getElementById(curr_parent).appendChild( obj );
		obj.style.display='block';
		flash_in(url_1, url_2);
		}

function hidemov( curr_parent, obj_id ) {
		obj.style.display='none';
		flash_out();
		}
//-->
</script>

<style type="text/css">
.snapshot {
		position:relative;
		width:270px;
		height:175px;
		background-color:#99FF33
		}
</style>

</head>
<body onload="initialize();">

<object id="ghost" style="display:none; position:relative;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553517500" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="270" height="175" id="ff" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent"/>
<param name="movie" value="3.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cc0000" />
<embed src="3.swf" wmode="transparent" quality="high" bgcolor="#cc0000" width="270" height="175" name="ff" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>


<div class="snapshot" id="snapshot_1" onmouseover="showmov( 'snapshot_1', 'ghost', 'URL 1', 'URL 2' )" onmouseout="hidemov( 'snapshot_1', 'ghost' ) "></div><br>
<div class="snapshot" id="snapshot_2" onmouseover="showmov( 'snapshot_2', 'ghost' )" onmouseout="hidemov( 'snapshot_2', 'ghost' ) "></div>
</body>
</html>


Вот все получилось, задумка такая что при наведении на скрин (картинка JPG) фильма будет играть его трейлер, я попытался еще прикрутить отправку параметров в флеш плеер но чего то не так видо делаю не отправляются ... это первая проблема.

Вторая в опере мерцание идет - если наводить на объект, я порыл сеть нашел такой совет:
Цитата

Это стандартная проблема. Обычное решение — по onmouseout запускать таймер на 0.1 с, а по onmouseover его сбрасывать. Если не сбросился — отрабатывать обработчик onmouseout.

но то то не понял что имел ввиду автор совета.

Помогите решить эти две проблемки
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.