Question

I have a box built via html borders.

I want to connect the bottom left corner to the top right corner with a diagonal line. Either with html/css or by using a background image, doesn’t matter. I’ll figure that part out later.

------
-   /-
-  / -
- /  -
-/----

Here’s the tricky part: I want a different thing to happen depending on which side of the line the mouse is hovering over. I’ll do something like make some text visible or change the background color.

Is that possible in web programing? I’ve thought of doing a “Riemann sum” type calculation with a bunch of invisible divs. Any easier way?

Thanks!

Answer 1

You need to get mouseX and mouseY positions, div bottom and left coordinates, and solve a simple linear equaion:

y
|   /
|  / y &lt (imageHeight/imageWidth)*x
| /
|/
/----------x

code:

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
//source: blog.firetree.net/2005/07/04/javascript-find-position/

//definition of widths and heights:
var imageWidth = [];
var imageHeight = [];
imageWidth["one"] = 100;
imageHeight["one"] = 300;

imageWidth["two"] = 200;
imageHeight["two"] = 300;
//etc

function checkClick(divId) {
    var posx = 0;
    var posy = 0;
    var e = window.event;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {  
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // source of mouse position: www.quirksmode.org/js/events_properties.html#position

    valX = posx - findPosX(document.getElementById(divId));
    valY = posy - (document.getElementById(findPosY(divId))+imageHeight[divId]); //we need to get the bottom-left corner
    if(valY &lt posX*imageHeight[divId]/imageWidth[divId]) {
    //we are below the line - in lower part of the div
    }
    else {
        //we are in the upper part
    }}

And that’s it. You only need to add checkClick as handler of onmouseover and set imageWidth and imageHeight