Jump to content


Photo

Tooltip


  • Please log in to reply
2 replies to this topic

#1 ari_aaron

ari_aaron
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts
  • LocationToronto, Canada

Posted 18 May 2006 - 10:32 PM

How can I make this work in javascript (or another web language):
when(mouse_pressed)
    {
    if (mouse_x>10 && mouse_x<15 && mouse_y>4 && moue_y<20)
        {
         tooltip('hi, this is a tooltip')
        }
 if (mouse_x>20 && mouse_x<35 && mouse_y>7 && moue_y<24)
        {
         tooltip('hi, this is another tooltip')
        }
    }

Basicly, when the mouse button is pressed, if the mouse is between a certain x and y range on the page, a tooltip is shown.

I cannot make hyperlinks because it is in the middle of an image.

#2 desithugg

desithugg
  • Members
  • PipPipPip
  • Advanced Member
  • 281 posts
  • LocationScarborough

Posted 26 March 2007 - 10:00 PM

umm why dont you use a link and show a popup when click
if your using an image i suggest using image maps
you can create image maps very easily with evrsoft page 2006
it's a freeware program I found through google and I liked it better than dreamweaver. But yeah image maps allow you to carray out links or actions when a certain area (point,rectange,square,circle,etc..) on an image is clicked or hoverd upon.

#3 BlackenedSky

BlackenedSky
  • Members
  • PipPip
  • Member
  • 28 posts
  • LocationEngland

Posted 28 March 2007 - 07:49 PM

Here is a quick bit of code to do it off the top of my head, but by no means the best, and probably full of errors, but hope it's of some use to you.

var toolTip = null;

document.body.onmousemove = tooltip;

function getText(x,y) {
    //probably more efficient to use switch statements
    if (x = 123 && y = 123) {
        return "tooltiptexthere";
    } else if (x = 456 && y = 456) {
        return "someothertext";
    } else return false;
}

function tooltip(e) {
    if (document.all?true:false) e = window.event;
    if (e.button != 1) return;

    if (document.all?true:false) {
        var x =e.clientX + document.body.scrollLeft;
        var y=e.clientY + document.body.scrollTop;
    } else {
        var x=e.pageX;
        var y=e.pageY;
    }

    var text = getText(x,y);
    if (!text) {
        if (toolTip) toolTip.style.display="none";
        return;
    }

    if (!toolTip) {
        toolTip= document.createElement('div');
        var txt = document.createTextNode(text);
        toolTip.appendChild(txt);
        toolTip.style.position="absolute";
        document.appendChild(toolTip);
    } else {
        toolTip.childNodes[0].nodeValue=text;
        toolTip.style.left=x;
        toolTip.style.top=y;
        toolTip.style.display="block";
    }
}

BlackenedSky // _equinox
www.BlackenedSky.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users