Over href and on mouse move change cursor and ignore / supress url

[JohRid]

In a web-application I am trying to create a behavior similar to other systems used in our work enviroment. This web-application is only used with I.E 9+.

So far I have the following CSS:

a:link {
    cursor: "url('../images/Default_geel.cur')";
    text-decoration: none;
    }

a:visited {
    cursor: "url('../images/Default_geel.cur')";
    text-decoration: none;
    }

a:hover {
    cursor: "url('../images/Default_geel.cur')";
    text-decoration: none;
    }

a:active {
    cursor: "url('../images/Reverse_zwart.cur')";
    text-decoration: none;
    }

This to use very specific cursors.

Besides the CSS I use JavaScript (jquery) to be able to click and drag the content of the iframe. This is the javascript used:

window.onload = function () { 
    var move = $('body');
    var x, y;
    var scroll = false;
    var startscroll = false;

    move.scrollTop (<%=Session("ScrollTop")%>);
    move.scrollLeft (<%=Session("ScrollLeft")%>);

    move.mousemove (function (event) {
        if (startscroll) {
            if (event.clientX > 25 && event.clientX < (<%=Session("SchermVisualiseringBreedte")%> - 25) && event.clientY > 25 && event.clientY < (<%=Session("SchermVisualiseringHoogte")%> - 25)) {
                document.body.style.cursor = "url('../images/Hand_rood.cur')";
                startscroll = false;
                scroll = true;
                }
            }
        
        if (scroll) {
            move.scrollLeft (move.scrollLeft() + (x - (event.clientX + document.documentElement.scrollLeft)));
            move.scrollTop (move.scrollTop() + (y - (event.clientY + document.documentElement.scrollTop)));
            }

        x = event.clientX;
        y = event.clientY;

        if (x < 25 || x > (<%=Session("SchermVisualiseringBreedte")%> - 25) || y < 25 || y > (<%=Session("SchermVisualiseringHoogte")%> - 25)) {
            document.body.style.cursor = "url('../images/Default_geel.cur')";
            scroll = false;
            }

        x = x + document.documentElement.scrollLeft;
        y = y + document.documentElement.scrollTop;
        });

    move.mousedown (function () {
        if (event.clientX > 25 && event.clientX < (<%=Session("SchermVisualiseringBreedte")%> - 25) && event.clientY > 25 && event.clientY < (<%=Session("SchermVisualiseringHoogte")%> - 25)) {
            document.body.style.cursor = "url('../images/Hand_rood.cur')";
            }
        startscroll = true;
        return false;
        });

    move.mouseup (function () {
        document.body.style.cursor = "url('../images/Default_geel.cur')";
        startscroll = false;
        scroll = false;
        return false;
        });

    move.focusout (function () {
        document.body.style.cursor = "url('../images/Default_geel.cur')";
        startscroll = false;
        scroll = false;
        parent.parent.frames("EXTRA2").location.href = "savescroll.asp?ScrollTop=" + move.scrollTop() + "&ScrollLeft=" + move.scrollLeft();
        return false;
        });
    }

Everything is working as expected but there is a thing I want changed.

When the mouse is on a A HREF=”….” and at the same time the mouse-button is held down and the mouse is moving, I want the pointer to change to “Hand_rood.cur”. If possible I want the URL to be ignored / supressed.

I spent many hours searching for a sollution, but I could not make it work. From origin I am a VB programmer, so Javascript is far from my strongest point.

Any suggestion is appreciated….

[Author]

Posts