Jump to content

Tooltip


ari_aaron

Recommended Posts

How can I make this work in javascript (or another web language):
[code]
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')
        }
    }
[/code]

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.
Link to comment
Share on other sites

  • 10 months later...
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.
Link to comment
Share on other sites

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.

[code]
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";
    }
}
[/code]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.