Nishant is correct for the mouseout, you are just missing the first single quote.

For the style you would probably want something like this

<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>

The position: absolute; will tell the browser to put it exactly where you want it. In this example I told it to position itself 50px from the top and 50px from the right. You can also use the keywords "bottom" and "left".

Here's a quick way to do it.

http://jsfiddle.net/wilchow/4hzenxkh/

HTML:

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 1</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 2</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 3</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 4</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 5</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 6</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 7</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 8</a></p>

CSS:

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;

}
p.product a {
    display: inline-block;
    position: relative;
}
p.product {
    margin-left: 150px;
}

script:

$(document).ready(function() {
    $(".product a").mouseover(function () {
        $(".product a img").css("display", "none"); // hide all product images
        $(this).find("img").css("display", "inline-block"); // show current hover image
    })
    $(".product a").mouseout(function () {
        $(".product a img").css("display", "none"); // hide all product images
    })
});

Look at the snippet below.

The HTML part is so simple. You have some images in screen with class .image.

CSS part is so simple too. You have two classes:

• image class
• and cloned image class

I did not comment to JS part but the idea behind that is:

• I use closure and use document as parameter for better performance
• then a docReady function listen to document's state to be ready

For more information about docReady function see this link

• after document content loaded, get all images with getElementsByClassName function
• then in a for loop, iterate through them and create a event listener for mouseenter and mouseleave
• in mouseenter event, create an element then add id, class and src to it and manipulate top and left (depends on where you want it to be. Use position engine!). After all add/append it to body.
• and in mouseleave event listener, find cloned image and remove it from document's body.

It maybe not compatible with all browsers! use jQuery for that purpose.

Improve it and fix minor bugs then you can simply use it.

I hope it helps. sorry for my bad english :)

// This is a closure
(function(document) {
  function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  docReady(function() {
    var images, image, id, clone;
    var i, len;
    var clone_cls = 'clone-image';
    var bound;

    images = document.getElementsByClassName('image');
    len = images.length;

    for (i = 0; i < len; i++) {
      image = images[i];

      // Mouse enter event
      image.addEventListener('mouseenter', function() {
        id = uniqueId();
        //-----
        this.setAttribute('data-clone-id', id);
        //-----
        clone = document.createElement('IMG');
        clone.src = this.src;
        clone.classList.add(clone_cls);
        clone.id = id;
        //-----
        bound = this.getBoundingClientRect();
        clone.style.top = (bound.top + pageYOffset) + 'px';
        // clone.style.right = document.body.offsetWidth - (bound.right + pageXOffset) + 'px';
        clone.style.left = (bound.left + pageXOffset) + 'px';
        document.body.appendChild(clone);
      });
      // Mouse leave event
      image.addEventListener('mouseleave', function() {
        id = this.getAttribute('data-clone-id');
        if (id) {
          this.removeAttribute('data-clone-id');
          clone = document.getElementById(id);
          if (typeof clone !== 'undefined') {
            clone.remove();
          }
        }
      });
    }

    function uniqueId() {
      var name, num, str, test;
      //-----
      name = 'clone';
      do {
        num = Math.floor(Math.random() * 100000);
        str = name + num;
        test = document.getElementById(str);
      } while (test && test.length);

      return str;
    }
  });
})(document);

.image {
  display: inline-block;
  width: 300px;
  height: 300px;
}

.clone-image {
  position: absolute;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 1001;
  pointer-events: none;
}

<div>
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 1" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 2" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 3" alt="dummy image" class="image">
  <img src="https://dummyimage.com/900x900/40495c/ffffff.jpg&text=Image 4" alt="dummy image" class="image">
</div>

The way I have been using recently for these sort of things is to append a data- attibute to the element that is firing the event. So in this case your TD. Here is a link to the HTML 5 standard which describes the use of data attributes

http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

You could have something like this in your td

<td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>

Then in your javascript you get the value of the attribute like this:

var imgsrc = element.getAttribute('data-imgsrc');

I strongly recommend you learn a bit of jQuery to link this all together is it will make your life infinitely easier. Otherwise you can continue on in plain javascript.

in jQuery (includes fading box easily)

HTML

<td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>

jQuery

$(document).ready(function(){
    $('td[data-imgsrc]').mouseenter(function() {
        var imgsrc = $(this).attr('data-imgsrc');
        $('img#id_of_your_image_element').attr('src',imgsrc).show();
    });
    $('td[data-imgsrc]').mouseleave(function() {
        $('img#id_of_your_image_element').fadeOut(200);
    });
});

Or in plain javascript

HTML

// You need to add an onclick handler on every td
<td data-imgsrc="imgfoler/specificimg.jpg" onmouseover="swapimg(this);">
    The item name
</td>

JS

function swapimg(element) {
    var imgsrc = element.getAttribute('data-imgsrc');
    var imgelement = document.getElementById('id_of_your_image_element');
    imgelement.setAttribute('src',imgsrc);

    // No fading out here, if you want fading just use jQuery. Fading
    // in native JS is a pain in the behind.
}

Actually to show this, you don't need jQuery at all, since you can do it just with css as here: http://jsfiddle.net/wwp66o9s/1/

<ul>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
</ul>


li {
  list-style: none;
  position: relative;
}
li a > img {
  display: none;
  position: absolute;
  top: 10px;
  left: 150px;
}
li a:hover > img {
  display: block;
}

From you original question and this comment ("Hello, thanks for the reply. The image needs to pop up over the div about the mouse point. Moving the mouse changes the image location to where the mouse is. Thanks though!")

I created this solution:

http://jsfiddle.net/YPu96/1/

Hover over div: The image becomes visible and follows the mouse-pointer.

On click: The image becomes invisible and stops following.

HTML:

<div class="someDiv">
  <p>Foobar</p>
</div>
<img style="display:none" class="image" src="http://www.budick.eu/images/logo-BudickEu.jpg"/>

JavaScript:

$(".someDiv").hover(function() {
  $(document).mousemove(function(event) {
    $(".image").css({"position":"absolute","left":event.clientX ,"top":event.clientY     }).show();    
  });    
});

//end movement with click
$(document).bind("click",function(){
  $(document).unbind("mousemove");
  $(".image").hide();
});

html code:

<a href="#">some text here..<img src="image url" /></a>

css code:

a img { display:none; }
a:hover img { display:block; }

I could imagine something like this here:

$(".image").hover(function(){
    //display bigger image here
}, function() {
    //hide it here
});

Alternative, you can use CSS :hover

For displaying images next to cursor you can use this one jQuery method

$(document).mousemove();

Example:

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

See this fiddle for the working one https://jsfiddle.net/q1xc7vbg/

Cheers