Forum 4stream.pl

Forum o radiach internetowych => Strony internetowe => Wątek zaczęty przez: ogarniacz w 25 Grudzień 2012, 20:45:15

Tytuł: Obrazek ucieka po najechaniu myszką
Wiadomość wysłana przez: ogarniacz w 25 Grudzień 2012, 20:45:15
Chciałbym aby po najechaniu myszką na obrazek uciekal w jakąś część ekranu. Nie wiem czy da się zrobić coś takiego. Dzięki
Tytuł: Odp: Obrazek ucieka po najechaniu myszką
Wiadomość wysłana przez: EonFM w 25 Grudzień 2012, 22:48:00
Jasne, że się da. Trzymaj

na podstawie www - kod sobie wyciągniesz:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>nazwa strony</title>
<script type="text/javascript">

var layerWidth, layerHeight, selector;
function init()
{
  selector = document.getElementById('warstwa1').style;
  var windowWidth = document.body.clientWidth;
  var windowHeight = document.body.clientHeight;
  layerWidth = parseInt(selector.width);
  layerHeight = parseInt(selector.height);
  selector.top = Math.floor((windowHeight - layerHeight) / 2);
  selector.left = Math.floor((windowWidth - layerWidth) / 2);
}
function over()
{
  topVal = parseInt(selector.top);
  leftVal = parseInt(selector.left);
  direction = Math.round(Math.random() * 7);

  switch(direction){
    case 0 :
      leftValAdd = 0;
      topValAdd = -layerHeight;
      break;
    case 1 :
      leftValAdd = layerWidth;
      topValAdd = -layerHeight;
      break;
    case 2 :
      leftValAdd = layerWidth;
      topValAdd = 0;
      break;
    case 3 :
      leftValAdd = layerWidth;
      topValAdd = layerHeight;
      break;
    case 4 :
      leftValAdd = 0;
      topValAdd = layerHeight;
      break;
    case 5 :
      leftValAdd = -layerWidth;
      topValAdd = layerHeight;
      break;
    case 6 :
      leftValAdd = -layerWidth;
      topValAdd = 0;
      break;
    case 7 :
      leftValAdd = -layerWidth;
      topValAdd = layerHeight;
      break;
  }
  newTopVal = topVal + topValAdd;
  newLeftVal = leftVal + leftValAdd;
  if (newTopVal < 0)
    newTopVal = document.body.clientHeight - layerHeight;
  if (newTopVal > document.body.clientHeight - layerHeight)
    newTopVal = 0;
  if (newLeftVal < 0)
    newLeftVal = document.body.clientWidth - layerWidth;
  if (newLeftVal > document.body.clientWidth - layerWidth)
    newLeftVal = 0;
  selector.top = newTopVal;
  selector.left = newLeftVal;
}

</script>
</head>
<body onLoad="init()">
<div
 id = "warstwa1"
 style = "visibility: visible;
         color: red; position: absolute;
         top: 10; left: 10;
         width:100; height:100;"
         onMouseOver = "over()">
<img src="image.png" alt="obrazek">
</div>
<p>
Tutaj tekst strony
</p>
</body>
</html>