ansaurus

Question

Any way to do slanted/diagonal mouseovers via css/javascript?

Answer 1

+1 A:

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

Nasser Hadjloo 2010-04-18 07:12:04

Answer 2

+3 A:

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)

oezi 2010-04-18 07:13:21

Cool, didn't even know those existed... triangles are possible too... http://www.crosswinds-cadre.net/?page=imagemap#triangleChrome currently seems to have a bug where the status bar doesn't pop up to show the URL like it does for normal links. That's lame, but it'll do. Thanks!

cksubs 2010-04-18 07:32:20

@cksubs, if this is your preferred answer you might consider accepting it (click on the un-filled tick to the left).

David Thomas 2010-04-18 08:18:40

I know how to accept answers. I'm checking out some of the CSS3 and javascript answers below, I'll decide on which works best.

cksubs 2010-04-18 08:22:02

@cksubs, fair dos; I saw the "it'll do" and jumped the gun. My bad =)

David Thomas 2010-04-18 14:01:10

Answer 3

+1 A:

Riemann sums? wow, you're hardcore.

Checkout CSS3 transforms. Browser compatibility 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);

Anurag 2010-04-18 07:39:41

I like this answer, think it's the most succinct if it works. However, is there a similar way to do a triangular region rather than a rotated rectangular line? My intended behavior is to have :hover states for each of the regions, and for each region to be a link. Not just for a mouseover on the middle line. Although I like the CSS3 use, this would get very complicated using to do what I'm intending (unless I'm missing something).

cksubs 2010-04-18 08:33:46

Answer 4

+3 A:

raceCh- 2010-04-18 08:02:52

Thanks. There would be 10+ of these on the page, and I'm a little hesitant to use a ton of javascript if I don't have to. Is there an advantage of using this technique over something like imagemaps?

cksubs 2010-04-18 08:35:44

Yes, there is. You don't create a ton of maps. You use same functions, only specify arrays of imageWidth and imageHeight indexed by div name. Replace imageWidth with imageWidth[divid], same for imageHeight, pass divid as parameter, and that's it :)

raceCh- 2010-04-18 08:39:22

Answer 5

+2 A:

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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <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>

Casey Hope 2010-04-18 08:22:11

Answer 6

A:

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.com/

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 compatible back to IE6, but IE's vector implementation doesn't support floating point numbers apparently, so you might come across strange behaviour with certain combinations of animations.

For example, I applied an SHM/exponential decay easing to a rotation to simulate a leaf jiggling in the wind. IE completely 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 comfortable 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.

David Meister 2010-04-18 08:37:55

ansaurus

tags:

views:

answers:

Any way to do slanted/diagonal mouseovers via css/javascript?

related questions