Javascript Png transparency hitTest detection with div

Question

Is there a way to detect if a div png background or png image part is transparent by hittest using another div as reference? Lets say, every time #char is over a pixel with opacity less than 100%, this will be detected and alerted. Is there a way to work this out with javascript or jquery?

LIVE DEMO HERE

$(document).ready(function () {

    setInterval(moveChar, 20);
    var keys = {}

    $(document).keydown(function (e) {
        keys[e.keyCode] = true;
    });

    $(document).keyup(function (e) {
        delete keys[e.keyCode];
    });


    function moveChar() {

        for (var direction in keys) {
            if (!keys.hasOwnProperty(direction)) continue;
            if (direction == 37) {
                $("#char").animate({
                    left: "-=5"
                }, 0);
            }
            if (direction == 38) {
                $("#char").animate({
                    top: "-=5"
                }, 0);
            }
            if (direction == 39) {
                $("#char").animate({
                    left: "+=5"
                }, 0);
            }
            if (direction == 40) {
                $("#char").animate({
                    top: "+=5"
                }, 0);
                walk("down");
            }
        }
    }

});

possible duplicate of [Html5 canvas hittest arbitrary shape](http://stackoverflow.com/questions/19807049/html5-canvas-hittest-arbitrary-shape) — c-smile, Sep 23 '15 at 04:55
Its not duplicated as I want to aply a rule for a moving DIV. — Fernando Souza, Sep 23 '15 at 06:41
Perhaps I should edit my question our ask a new one? Thanks for your reply. — Fernando Souza, Sep 24 '15 at 06:57

score -1 · Answer 1 · edited May 23 '17 at 10:30

-1

I am not sure this will work, but I think it would:

I've done a reasonable amount of research into this this issue and came to the conclusion that it was not feasible to create a feature test in JavaScript, and that IE 6 is the only browser in serious use that doesn't support PNG transparency. That being the case, your best bet is conditional comments, as recommended by Gabriel Ross. It is possible to use conditional comments in pure JavaScript, which I think is what you want:

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 6]><i></i><![endif]-->";
var isIe6orLower = (div.getElementsByTagName("i").length == 1);

alert("Is IE 6 or lower: " + isIe6orLower);

See the link

edited May 23 '17 at 10:30

Community

1
1

answered Sep 23 '15 at 04:55

Ivin Raj

3,448
2
28
65

Thanks, but in this case IE 6 will not metter, working or not. – Fernando Souza Sep 23 '15 at 06:39
But how the comments can help me to do this hit-test? – Fernando Souza Sep 23 '15 at 06:46
" IE 6 is the only browser in serious use ".... IE6 died years ago. The people that use it they have deserved that happens when visit a modern website. As simple as this – Marcos Pérez Gude Sep 23 '15 at 08:03
This answer is not responsive. – e.w. parris Jan 03 '17 at 15:45

Javascript Png transparency hitTest detection with div

1 Answers1