Javascript Popup (onmouseover) Options

[jpbazinet]

I'm using the following Javascript code to make a small image pop-up when the cursor is over a link.
The original code is intended to show text when hovering over a link. This works on all browsers.

I modified it to show an image instead, now it works in FF but not in IE...
Anyone know what I can do to fix it?

java script:

CODE

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

var pop = document.getElementById('popup');

var xoffset = 15;
var yoffset = 10;

document.onmousemove = function(e) {
  var x, y, right, bottom;
  
  try { x = e.pageX; y = e.pageY; } // FF
  catch(e) { x = event.x; y = event.y; } // IE

  right = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth);
  bottom = (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) + (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight);

  x += xoffset;
  y += yoffset;

  if(x > right-pop.offsetWidth)
    x = right-pop.offsetWidth;

  if(y > bottom-pop.offsetHeight)
    y = bottom-pop.offsetHeight;
  
  pop.style.top = y+'px';
  pop.style.left = x+'px';

}

function popup(text) {
  pop.innerHTML = text;
  pop.style.display = 'block';
}

function popout() {
  pop.style.display = 'none';
}

//--></script>

CSS:

CODE

  #popup {
    /* Necessary: */
    position: absolute;
    display: none;
    z-index: 10;

    /* Additional styling: */
    width: 136px;
    font-size: xx-small;
    background-color: #eee;
    border: 1px dotted #ece;
    opacity: .85;
    filter: alpha(opacity=85);
  }

HTML:

CODE

<A HREF="/trailers.php?id=babylonad" onmouseover="popup('<img src=\'/posters/big/babylonad.jpg\'')" onmouseout="popout()">Babylon A.D.</A>

Example: http://movie-list.com/index.php
(all links under the main column have this in effect)

This post has been edited by jpbazinet: Jul 1 2008, 10:39 PM

[Frederiek]

You can't put an entire <img> tag in the parameter of your function call. It should only be used to tell the script which image to use.

Since only mouseover and mouseout is used, you might consider to use CSS instead. An exemple of that can be found at http://meyerweb.com/eric/css/edge/popups/demo2.html.

[Brian Chandler]

You can't put an entire <img> tag in the parameter of your function call. It should only be used to tell the script which image to use.

Why not? (To the 1st sentence - I don't understand the 2nd.)

It looks as though the argument to the javascript function popup() is the text to be inserted in "htmlinner" (which I've never been able to parse, but doesn't it mean simply the text content of the html element in question)...

But since the script has no comments, it's properly speaking unusable.

[Christian J]

CODE

onmouseover="popup('<img src=\'/posters/big/babylonad.jpg\'')"

The IMG tag above lacks its right ">". Opera9.5 actually displays the IMG markup literally.

[jpbazinet]

The IMG tag above lacks its right ">". Opera9.5 actually displays the IMG markup literally.

Turns out this was the problem... Don't know how I missed that, but that's why forums like this are great.

Now works in all browsers.

This post has been edited by jpbazinet: Jul 2 2008, 12:36 PM