On Mouseover Hover Box

[proxximo]

Hello all.

 

I am having a problem with  an idea, and Im not quite sure how to make it work. I have spent the last three hours on google looking for a way, but to no avail.

 

Here is the idea:

 

I have a game inventory page with pictures of your equipment. What I want to happen is when you hover over the image it will display a hovering box with all of the items statistics. During my searching I was able to find something similar but it used a popup window.

 

If anyone has the code needed to achieve this or a searchable phrase that would send me to the right place I would really appreciate the help.

 

Thanks

 

Proxx         

[proxximo]

I forgot to mention that the information will be pulled from a MySQL database using php with the location

 

index.php?do=itempopup:$code

 

Thanks ahead of time

[xtopolis]

It's easy.  You don't even need ajax if you don't want to (just load all the data up front and hide it).

 

You should work at it like this:

1) Get a regular test page to work using ajax to retrieve that data based on clicking a link, or entering a number in a faux form.

 

2) Once you can successfully retrieve the data,  use css to format it to the approximate size and style that you want it to appear on the game.

 

3) Using javascript you will create an "onmousemove" even for the element (or onmouseover).  That will trigger a function to display the div in the position of your mouse in the style you made from your test page.

 

I don't have ajax, but you can see the onmousemove event at my site: http://www.xtopolis.com  (move your mouse over the text at the bottom)

[proxximo]

Ok I got everything to display the way I want it to and all, the only thing I cant figure out is how to make the div display where my mouse is. Right now it displays where I have the Div set on the page. Any help there xtop?

[xtopolis]

From my source code:

 

Setup your hidden div:

<div id="tt_div" style="visibility: hidden;"></div>

 

Element to hover over:

<a onmouseout="return hideTooltip(event)" onmousemove="return displayToolTip(event,'tt_div','by Xtops',-20,25,'#000000')" href="javascript: void(0);">Element</a>

^the above uses 2 functions, hideTooltip and displayToolTip.

 

(Javascript src: http://www.xtopolis.com/_common/ajax/index.js)

//MouseEvent gather same relevant data for multiple browswers
function MouseEvent(e)
{
  if(e) {
    this.e = e;
  }else{
    this.e = window.event;
  }
  
  if(e.pageX) {
    this.x = e.pageX;
  }else{
    this.x = e.clientX;
  }
  
  if(e.pageY) {
    this.y = e.pageY;
  }else{
    this.y = e.clientY;
  }
  
  if(e.target) {
    this.target = e.target;
  }else{
    this.target = e.srcElement;
  }
}

//Get the element that was affected(moused over)
//Get the mouse's x/y coords
function displayToolTip(e,div,msg,xpos,ypos,color)
{
  var e = new MouseEvent(e);
  
  var x = e.x + xpos;
  var y = e.y - ypos;
  
  //place the tootip div nearby where the mouse entered the element
  //and replace the text with the appropriate message
  //then make it visible
  theDiv = document.getElementById(div);
  theDiv.style.left = x + 'px';
  theDiv.style.top = y +'px';
  theDiv.style.color = color;
  theDiv.innerHTML = msg;
  theDiv.style.visibility = "visible";
  
  return false;
}


//hide the tooltip when the mouse leaves the element
//and reset the div's text
function hideTooltip(e)
{
  var e = new MouseEvent(e);
  
  theDiv = document.getElementById("tt_div");
  theDiv.style.visibility = "hidden";
  theDiv.innerHTML = '';
  
  return false;
}

 

The arguments for displayToolTip are:

displayToolTip(e,div,msg,xpos,ypos,color) == (event)(id of div)(content of div)(offset x from mouse position)(offset y from mouse position)(text color)

[proxximo]

Thanks a ton for your help!

[proxximo]

I am still having a little snag on the code. I have gotten everything to work pretty well.

 

When the page loads, the div is invisible. When I hover over my element it becomes visible, the only problem is that the div just shows up on the page where it is rather than hovering with my pointer. Any ideas?

[proxximo]

I believe I may have found the problem. It is my testing environment that wont allow me to use this correctly. I think it will sort itself out once I put it on the live server.