Показать сообщение отдельно
  #6 (permalink)  
Старый 30.06.2014, 02:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

desertFox, и что не так?
<!DOCTYPE HTML>

<html>

<head>
<style type="text/css">
a{
  display:inline-block;
  float:right;
}

#newDivPh{
  position:absolute;
  visibility:hidden;
  padding:0px;
  margin:0px;
  z-index:300;
  background-color:#ffffff;
  background-image:url("./images/spinner.gif");
  background-repeat:no-repeat;
  background-position:center;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  border:#FFFFFF 6px solid;
  border-bottom-width:2px;
}

#newDivPh img{
  padding:0px;
  margin:0px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

body{
  background:#DDDDDD;
}
</style>
  <title>Untitled</title>
  <script>
    // При наведении на объект
function photoOn( e ,ell){
  var newDivPh = document.createElement('div');
  document.body.appendChild(newDivPh);
  newDivPh.id = 'newDivPh';
  var newImg = document.createElement('img');
  newDivPh.appendChild(newImg);
  newImg.setAttribute('alt', '');

  newImg.id = 'newImg';
  var event = (window.event) ? window.event : e;
  newImg.onload = function () {
	  if(newDivPh.offsetHeight >= window.innerHeight) {
		newDivPh.style.top = (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop)+5 + 'px';
	  } else if (event.clientY + newDivPh.offsetHeight > window.innerHeight) {
		newDivPh.style.top = (event.clientY - newDivPh.offsetHeight - 1 + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop) + 'px';
	  } else {
		newDivPh.style.top = (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop)+5 + 'px';
	  }

	  newDivPh.style.left = (event.clientX - newDivPh.offsetWidth - 7 + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft) + 'px';
      newDivPh.style.visibility = 'visible';
  }
    newImg.setAttribute('src', ell);
    newImg.complete && newImg.onload();
}
// При движении по объекту
function photoMove(e){
  var newDivPh = document.getElementById('newDivPh');
  var event = (window.event) ? window.event : e;
  if(newDivPh.offsetHeight >= window.innerHeight) {
	newDivPh.style.top = (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop)+5 + 'px';
  } else if (event.clientY + newDivPh.offsetHeight > window.innerHeight) {
	newDivPh.style.top = (event.clientY - newDivPh.offsetHeight - 1 + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop) + 'px';
  } else {
	newDivPh.style.top = (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop)+5 + 'px';
  }

  newDivPh.style.left = (event.clientX - newDivPh.offsetWidth - 7 + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft) + 'px';
}
// При убирании курсора с объекта
function photoOff(){
  var newDivPh = document.getElementById('newDivPh');
  newDivPh.parentNode.removeChild(newDivPh);
}

  </script>
</head>

<body>
<a href='#' onmouseover="javascript:photoOn( event,'http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-lg.jpg');" onmousemove="photoMove(event)" onmouseout="javascript:photoOff();"><img src='http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg' alt='' /></a>
</body>

</html>

Последний раз редактировалось рони, 30.06.2014 в 10:53.
Ответить с цитированием