всплывающее изображение при наведении курсора в другом месте

Нишант верен для мыши, вам просто не хватает первой одинарной кавычки.

Для стиля вы, вероятно, хотели бы что-то вроде этого

<style media="screen" type="text/css">
.pop-up {
    height: 200px;
    width: 100px;
    margin-right: 100px;
    margin-top: -10px;
    position:absolute;
right:50px;
top:50px;
}
</style>

Позиция: абсолютная; скажет браузеру разместить его именно там, где вы хотите. В этом примере я сказал ему позиционировать себя на 50 пикселей сверху и на 50 пикселей справа. Вы также можете использовать ключевые слова «нижний» и «левый».

Вот попробуй...

CSS

<style>
  .pop-up {
     height: 200px;
     width: 100px;
     margin-right: 100px;
     margin-top: 10px;
     float: right;
 display:none;
  }

 .button {
      /*change the width and height to match button.jpg's*/
      width:50px;
      height:50px;
      display:block;
  background-image:url(image/button.jpg);
  }
</style>

HTML

<a href="" class="button" onmouseover="javascript:ShowImage('images/eco.jpg')" onmouseout="javascript:HideImage()"></a>

<div id="popup" class="pop-up">
   <img id="popupImage" alt="Popup image" /> 
</div> 

JavaScript

<script type="text/javascript">
    function ShowImage(src)
    {
        var img = document.getElementById('popupImage');
        var div = document.getElementById('popup');
        img.src = src;
        div.style.display = "block";
    }
    function HideImage()
    {
        document.getElementById('popup').style.display = "none";
    }
</script>

надеюсь это поможет.

Чтобы исправить положение, в котором появляется всплывающее изображение, вам нужно написать стиль для #popupImage и разместить его там, где вы хотите, чтобы он отображался.

Для неработающей проблемы onmouseout... во-первых, в вашем HTML отсутствует одинарная кавычка и закрывается открытый тег привязки... Это должно быть...

<a href="" onmouseover="ShowImage('images/eco.jpg')" onmouseout="HideImage('images/button_ufad4.jpg')"></a>

Обратите внимание на отсутствие первой одинарной кавычки.

Во-вторых, в вашей функции вы никоим образом не используете изображение «images/button_ufad4.jpg», поэтому простое добавление дополнительной кавычки в начале имени изображения должно решить проблему onmouseout.