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!

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!

• javascript
• html
• css

• I have replied to your question in my answer and in ment :) – Krzysztof Bujniewicz Commented Apr 18, 2010 at 9:11

6 Answers 6

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

y
|   /
|  / y < (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/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/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 < 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

the only (easy) way i can think of is using an img for your splittet box (or use a transparent gif in the same size positioned on top of your box) and use an imagemap to define the diffenet areas.

here you can see an simple example how to do this:

  <img src="image.png" width="345" height="312" border="0" alt="this is my image" usemap="#mymap">
  <map name="mymap">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
  </map>

the difference is, that you have to use a poligon-shape for your areas (google will help looking for the syntax)

You can do this with Javascript (+JQuery to make life easier). Sample here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#div').mousemove(function (e) {
                    var div = $('#div');
                    var x = e.pageX; // Mouse position X (relative to window)
                    var y = e.pageY; // Mouse position Y
                    var w = div.width(); // Width of box
                    var h = div.height(); // Height of box
                    var xO = div.offset().left; // X position of box (relative to window)
                    var yO = div.offset().top; // Y position of box

                    var left = w/h*(yO-y)+xO+w > x;

                    $('#div').html(left ? 'left' : 'right');
                });
            })
        </script>
    </head>
    <body>
        <div id="div" style="width: 500px; height: 660px; border: 1px solid blue"></div>
    </body>
</html>

With lots of divs and span which put together you can make it but it's became too heavy fro slow connections. you can also use a background-image and change it with javascript

and the final solution is to use a Flash and it will implement very easy

Riemann sums? wow, you're hardcore.

Checkout CSS3 transforms. Browser patibility might be an issue if you want to support older browsers/versions. Using the transform function, and rotating the given div by X degrees, you would have a slanted line. Then just setup a mouseover callback in Javascript.

Checkout a working example here. Tested on Chrome, but should work on Firefox and Safari too.

html

<div id="slanted">..</div>

css

#slanted {
    transform: rotate(45deg);
}

javascript

var div = document.getElementById("slanted");
div.addEventListener('mouseover', function() {
    // so something
}, false);

You could draw it as a vector image using javascript since major browsers support various degrees of vector drawing.

You just set out an html block that will contain your vector graphics then insert whatever you need it for.

Check out the raphael.js library for easy integration of this idea.

http://raphaeljs./

I've used it in the past, it's pretty smooth for animating along paths, rotations and text-tweening, whatever it is your trying to do here, you were a little vague about that.

The author claims that it's patible back to IE6, but IE's vector implementation doesn't support floating point numbers apparently, so you might e across strange behaviour with certain binations of animations.

For example, I applied an SHM/exponential decay easing to a rotation to simulate a leaf jiggling in the wind. IE pletely failed, so I had to rewrite the whole script with a linear easing just for that POS browser.

But yeah, because it's javascript based, all the normal event handling that you're fortable with can be applied to the objects generated by raphael, just like anything else in your DOM, which is something flash can't do so well.