Форум АНТИЧАТ - Показать сообщение отдельно

Цитата:

Сообщение от XopoIII

екарный бабай, нехочу я на флеше делать) хочу на яве сделать) ток незнаю как

Учи Яву.
Держи от меня простой пример на JS.
Проверено и работает в Opera 9.5, Firefox 2.0.0.11.
Чтобы заработало в IE 6 и Safari - нужно явно указать css-свойства "top" и "left" в HTML, сам разберёшься.

Код:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
<!--

if (typeof document.defaultView == 'undefined')
  document.defaultView = {};

if (typeof document.defaultView.getComputedStyle == 'undefined')
{
  document.defaultView.getComputedStyle = function(element, pseudoElement)
  {
    return element.currentStyle;
  }
}
/* код выше - с xpoint'а */


function cs(elm)
{
  return document.defaultView.getComputedStyle(elm, null);
}


function mover(e, node)
{
  var e = e || event,
  k = e.charCode || e.keyCode,
  s = node.style,
  cst = cs(node),
  step = 10,
  lmax = parseInt(cs(node.parentNode).width)  - parseInt(cs(node).width),
  tmax = parseInt(cs(node.parentNode).height) - parseInt(cs(node).height);

  switch(k)
  {
    case 97: s.left  = Math.max(parseInt(cst.left) - step, 0) + 'px'; // Влево, a
     break;

    case 119: s.top  = Math.max(parseInt(cst.top)  - step, 0) + 'px'; // Вверх, w
     break;

    case 100: s.left = Math.min(parseInt(cst.left) + step, lmax) + 'px'; // Вправо, d
     break;

    case 115: s.top  = Math.min(parseInt(cst.top)  + step, tmax) + 'px'; // Вниз, s
     break;
  }
}

if (document.addEventListener) /* DOM - браузеры */ 
{
  document.addEventListener('keypress', function(e){mover(e, document.getElementById('red'))}, false);
}
else if (document.attachEvent) /*  IE  */
{
  document.attachEvent('onkeypress', function(e){mover(e, red)});
}

//-->
</script>

<style type="text/css">
<!--

body div {
	border:gray solid 1px;
	color: #DDD;
	padding: 0;
	background-color: #FAFAFA;
	width: 200px;
	height: 150px;
	line-height: 12px;
}

body div div {
	background-color: red;
	position: relative;
	width: 20px;
	height: 20px;
	border: none;
}

pre {
	text-align: center;
}

//-->
</style>
</head>
<body>
  <div>
    <div id="red"></div>
    <pre>

w
a s d
    </pre>
  </div>
</body>
</html>