Using the Alpha of a PNG as a "hotspot" to attach a click/hover event, possible?

Question

OPEN TO DISCUSSION I'm looking to optimize this code, possibly make an object. But more importantly, I'm new with functions. I'd like to learn to pass, retrieve, return variables. If anyone has any good tutorial links on this, or would like to discuss, please start here. :)

As we know, images are rectangles. I've got a few transparent PNG's inside of div's on seperate z-index layers. I reached the problem where I tried to click on one of the images, but it was being blocked by the div on top of it with a higher z-index. Is it possible to click thru PNG's and their parent div's to achieve this effect? Please see the attached image as a reference, it better illustrates my point.

Thanks!

In short, for some reason I thought I could use the PNG's alpha as a hitspot. LOL @ that idea. So I created overlaying div's in a new separate container and these acted as the hitspots.

As you can see this is an infinite carousel. The z-indexes of the hitspots as well as the z-indexes of the images change on click. This was an interesting project to say the least. I am looking to optimize it, and learn how to be more efficient with functions (ie passing, retrieving vars, returning vars and such.)

I will post the javascript when i get home to spark some interesting conversation, i hope. If you have any ideas on how to optimize, please share! :)

(function (w, d) {
$(w).load(function () { //window load
    preload();
    $('#info div a:not([rel=ad])').find('img').hide();  //hides 'learn more' buttons
}); //end window.load

$(d).ready(function () {        //document ready
    onHover();                  //activate hover
    onClick();                  //activates click function
});                             //end document.ready

var isFirst =   ["1"],      //flag to see if the first click was triggered on a hotspot or not
    pxPos   =   ["1px", "399px", "577px", "782px", "969px", "1162px", "1330px"],    //pixel position where we will animate the targets
    name    =   ["bill", "sophia", "brian", "jenn", "mom"],                         //names of talent; array used 
    thisZ   =   0;                                                                  //z-index used later to swap current target to front, and move others behind current

$('.left, .right').hide(); 

function onHover () {               //hover function  -- note: 'thisName' is a different variable in this f(n) than in onClick()
    $('.hit').hover(function () {
        var _this = this,
        thisName = $(_this).parent().attr('id'),
        img = '_img/' + thisName + '.png';
        $(_this).parent().next().find('img').attr('src', img);

    }, function() {
        var _this = this,
        thisName = $(_this).parent().attr('id'),
        img = '_img/' + thisName + '-d.png';
        if (!($(this).parent().next().hasClass('current'))) {
            $(_this).parent().next().find('img').attr('src', img);
        }
    })
}

function onClick () {
    $('a.left').bind('click', function (e) { 
        e.preventDefault();
        //left arrow click function
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            pos = 'p5';
            var o = [name[1],name[2],name[3],name[4],name[0]];
            name = o;
            var thisName = name[3];
            updateArr(thisName, pos);
        }; //end if animated
    })

    $('a.right').bind('click', function (e) {               //right arrow click function
        e.preventDefault();
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            pos = 'p3';
            var o = [name[4],name[0],name[1],name[2],name[3]];
            name = o;
            var thisName = name[3];
            updateArr(thisName, pos);
        } //end if animated
    })

    $('.hit').bind('click', function () {                   //click function
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            var _this = this;
            var thisName = $(_this).parent().attr('id');    //name of person who is clicked on

            if(isFirst[0] === "1") {                        //execute actions on first click
                $('h1').hide();
                $('.left, .right').fadeIn().show();         //fade in arrows
                $('#bg2').fadeIn().show();                  //fade in dark bg

                var pos = checkPosition(_this);             //checks position of clicked person
                updateArr(thisName, pos);                   //update array

                isFirst[0] = "2";                           //sets flag to "not first click"

            }else if(isFirst[0] === "2") {                  //all other clicks but the first click

                var pos = checkPosition(_this);             //checks position of clicked person
                updateArr(thisName, pos);                   //update array

            }   //end if
        }   //end if animated
    })      //end hit check
}


function checkPosition (_this, thisName) { //find current position and return
    var pos;
    if($(_this).parent().next().hasClass('p1')) {
        pos = 'p1';
    }else if($(_this).parent().next().hasClass('p2')) {
        pos = 'p2';
    }else if($(_this).parent().next().hasClass('p3')) {
        pos = 'p3';
    }else if($(_this).parent().next().hasClass('p4')) {
        pos = 'p4';
    }else if($(_this).parent().next().hasClass('p5')) {
        pos = 'p5';
    }
    return pos;
} //end checkClickPosition()

function updateArr (thisName, pos) { //update array

    // find person index in array
    for(l=0; l <= name.length; l++) {
        if(thisName == name[l]) {
            var thisIndex = l;
        }
    } //end for

    // search for index by matching index to position in array. create new array.
    if(thisName === name[thisIndex]) {
        var o = [];

        if(thisIndex === 0) {
            o = [name[2],name[3],name[4],name[0],name[1]];
        }else if(thisIndex === 1) {
            o = [name[3],name[4],name[0],name[1],name[2]];
        }else if(thisIndex === 2) {
            o = [name[4],name[0],name[1],name[2],name[3]];
        }else if(thisIndex === 3) {
            o = [name[0],name[1],name[2],name[3],name[4]];
        }else if(thisIndex === 4) {
            o = [name[1],name[2],name[3],name[4],name[0]];
        }
        name = o; //update array with new array

        updateFlags(); //update current flag

    } //end if

    //removes previous hilight and current class
    $.each($('.p'), function () {
        if(($(this).attr('class').length > 5)) { 
            var oldImg = $(this).find('img').attr('src');
            img = '_img/' + $(this).prev().attr('id') + '-d.png';
            $(this).find('img').attr('src', img);
            $(this).removeClass('current');
        }
    });

    //creates new hilight
    $('#' + thisName).next().addClass('current');
    img = '_img/' + thisName + '.png';
    $('#' + thisName).next().find('img').attr('src', img);

    updateZIndex();         //update z-indexes
    animate(pos);           //animates array

    var current = thisName;
    return disorderText(current);

} //end updateArr()

function updateFlags() {
    //removes position flags
    $('.p').each (function() {
        $(this).removeClass('p1 p2 p3 p4 p5');
    }); //end each

    //add new flags
    for(i=0; i < name.length; i++) {
        $('#' + name[i]).next().addClass('p' + (i + 1));
    } //end for
} //end updateFlags()

function updateZIndex (thisZ) {
    //re-orders hotspot z-indexes
    $("#" + name[3]).children().each(function(thisZ) {
        thisZ++;
        $(this).css({'z-index': thisZ + 800});
    });
    $("#" + name[4]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 700});
    });
    $("#" + name[2]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 600});
    });
    $("#" + name[1]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 500});
    });
    $("#" + name[0]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 400});
    });
    $('.p1').css({'z-index': 40});
    $('.p2').css({'z-index': 50});
    $('.p3').css({'z-index': 60});
    $('.p4').css({'z-index': 70});
    $('.p5').css({'z-index': 30});

} //end updateZIndex()

function animate (pos) {

    //set up selector names for hitspot container and image container
    var selector1 = '#' + name[0] + ', #' + name[0] + 'i',
        selector2 = '#' + name[1] + ', #' + name[1] + 'i',
        selector3 = '#' + name[2] + ', #' + name[2] + 'i',
        selector4 = '#' + name[3] + ', #' + name[3] + 'i',
        selector5 = '#' + name[4] + ', #' + name[4] + 'i',
        easeType = 'easeOutCubic',
        easeOutType = 'easeOutCubic';

    if (pos === 'p1') {
        $(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 600, easeType); //p5
        $(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 600, easeType); //p1
        $(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 600, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 1350, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 1350, easeType); //p4
    }else if (pos === 'p2') {
        $(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 700, easeType); //p5
        $(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 1550, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 1550, easeType); //p4
    }else if (pos === 'p3') {
        $(selector1).animate({'left': pxPos[6]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 500, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
    }else if (pos === 'p4') {
        $(selector1).animate({'left': pxPos[1]}, 500, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
    }else if (pos === 'p5') {
        $(selector1).animate({'left': pxPos[1]}, 700, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[0]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[6]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[5]}, 500, easeType); //p4
    }

} //end animate()

function disorderText (current) {

    var _this           =       ['swd', 'osa', 'nar'],
        swd             =       "Of the 15 million Americans who work evening or night shirts, 25% may have shift work disorder.",
        osa             =       "18 million Americans suffer from OSA.",
        nar             =       "Narcolepsy affects 1 in every 2,000 Americans.",
        link            =       "<a href=''><img src='_img/learn-more.png' width='125' height='31' class='learn_more' /></a>",
        brian_quote     =       '"' + "I get enough sleep during the day, but I'm still exhausted at work." + '"',
        sophia_quote    =       '"' + "Since I started working nights, I struggle to stay awake." + '"',
        jenn_quote      =       '"' + "I'm so tired on my shift that it's hard to do my job" + '"',
        bill_quote      =       '"' + "I struggle to stay awake even outside of work - I'm almost dozing off at my son's Little League games." + '"',
        mom_quote       =       '"' + "Quote to come." + '"',
        i               =       0,
        p_name          =       "",
        quote           =       "",
        info            =       "",
        disorderArr     =       ["_this", "swd", "osa", "nar", "link", "brian_quote", "sophia_quote", "jenn_quote", "bill_quote", "mom_quote", "i", "pname"];


    $('#info').children().each (function () {
        $(this).removeClass('open');
        $(this).find('.content').html('<p>');
    });

    switch(current) {
        case 'brian'    :   i = 0;
                            p_name = '<h2><b>Alex,</b> Bartender</h2>';
                            info = swd;
                            quote = brian_quote;
                            break;
        case 'sophia'   :   i = 0;
                            p_name = '<h2><b>Sophia,</b> EMT</h2>';
                            info = swd;
                            quote = sophia_quote;
                            break;
        case 'jenn'     :   i = 0;
                            p_name = '<h2><b>Susan,</b> Nurse</h2>';
                            info = swd;
                            quote = jenn_quote;
                            break;
        case 'bill'     :   i = 1;
                            p_name = '<h2><b>Martin,</b> Real Estate</h2>';
                            info = osa;
                            quote = bill_quote;
                            break;
        case 'mom'      :   i = 2;
                            p_name = '<h2><b>Susan,</b> Mom</h2>';
                            info = nar;
                            quote = mom_quote;
                            break;
    }
    $('#' + _this[i]).addClass('open');

    //handles information swap
    $('#info').children().each (function () {
        if($(this).hasClass('open')) {
            $(this).find('.header span').addClass('down');
            $(this).children().find('a img').show();            //show 'learn more' button
            $(this).find('.content').addClass('disorder');
        }else if(!$(this).hasClass('open')) {
            //$(this).children().find('a').hide();              //hide 'learn more' button
            $(this).find('.header span').removeClass('down');
            $(this).find('.content').removeClass('disorder');
        }
    }); //end show/hide 'learn more' button

    return $('#' + _this[i]).find('.content').html(p_name + '<p class="gen_quote"><i>' + quote + '</i></p>' + '<p class="gen_info"><b>' + info + '</b></p>' + '<p class="learn-more">' + '&nbsp' + link);
}

function preload(imgArray) {
    $(imgArray).each(function(){
        $('<img/>')[0].src = this;
    });
}

preload([ '_img/ad.png', '_img/arrow_sm_d.png', '_img/arrow_sm.png', '_img/arrow-left.png', '_img/arrow-right.png', '_img/bill-d.png', '_img/bill.png', '_img/border.png', '_img/brian-d.png', '_img/brian.png', '_img/corner.png', '_img/hit.gif', '_img/jenn-d.png', '_img/jenn.png', '_img/mom-d.png', '_img/mom.png', '_img/sidebar-bg.png', '_img/sophia-d.png', '_img/sophia.png', '_img/stone-bg-d.jpg', '_img/stone-bg.jpg' ]);

}(window, document));

Answer 1

try pointer-events css property:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

https://developer.mozilla.org/en/CSS/pointer-events