Jump to content

Archived

This topic is now archived and is closed to further replies.

ari_aaron

Tooltip

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.

Share this post


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

Share this post


Link to post
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]

Share this post


Link to post
Share on other sites

×

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.