Utilizzando l'Alpha di un PNG come "hotspot" per allegare un evento click/hover, possibile?

Question

OPEN TO DISCUSSION Sto cercando di ottimizzare questo codice, possibilmente creare un oggetto. Ma ancora più importante, sono nuovo con le funzioni. Mi piacerebbe imparare a passare, recuperare, restituire variabili. Se qualcuno ha dei buoni collegamenti tutorial su questo, o vorrebbe discutere, per favore inizia qui. :)

Come sappiamo, le immagini sono rettangoli. Ho alcuni PNG trasparenti all'interno di div su livelli separati di z-index. Ho raggiunto il problema in cui ho provato a fare clic su una delle immagini, ma era stato bloccato dal div in cima ad esso con uno z-index più alto. È possibile fare clic su attraverso PNG e div dei genitori per ottenere questo effetto? Si prega di vedere l'immagine allegata come riferimento, meglio illustra il mio punto.

Grazie!

In breve, per qualche ragione ho pensato che avrei potuto utilizzare alfa del PNG come hitspot. LOL @ quell'idea. Così ho creato la sovrapposizione di div in un nuovo contenitore separato e questi fungevano da hitpots.

Come potete vedere si tratta di una giostra infinita. Gli indici z degli hitpoint e gli indici z delle immagini cambiano al clic. Questo è stato un progetto interessante per non dire altro. Sto cercando di ottimizzarlo e imparare come essere più efficiente con le funzioni (ad esempio, passare, recuperare vars, restituire vars e così via)

Pubblicherò la javascript quando torno a casa per scatenare qualche conversazione interessante, spero . Se hai qualche idea su come ottimizzare, per favore condividi! :)

(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' ]); 

} (finestra, documento));

Answer 1

Questa è una grande domanda e di solito non sono un pessimista, ma non penso davvero che troverai una soluzione qui che non implichi un cambio di gioco. Cioè, suggerirei di usare un SVG al posto del PNG. In questo modo, puoi effettivamente avere hotspot che corrispondono ai limiti della tua forma. Non sono sicuro se questo funzionerà comunque per il tuo scenario. Guarda Raphaël-JavaScript Library.

Sai cosa? Potresti anche essere in grado di utilizzare un elemento Canvas HTML5 per disegnare l'immagine raster sul canvas, ma probabilmente dovresti comunque passare manualmente attraverso ciascun pixel per costruire un hotspot su di esso, usando il canale alfa come dati.

Vorrei avere questa capacità, nativo, ma io davvero non la penso così. Spero di aver dato alcune buone alternative.

Answer 2

provare pointer-events proprietà CSS:

la proprietà CSS puntatore-eventi consente agli autori di controllare in quali circostanze (se del caso) un elemento grafico particolare, può diventare il bersaglio di eventi del mouse. Quando questa proprietà non è specificata, le stesse caratteristiche del valore visiblePainted si applicano al contenuto SVG.

Oltre a indicare che l'elemento non è la destinazione degli eventi del mouse, il valore none indica all'evento del mouse di passare "attraverso" l'elemento e di scegliere quello che è "sotto" quell'elemento.

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

Answer 3

Un approccio interessante sarebbe utilizzando la proprietà CSS pointer-events:none, questo disabilita l'elemento di ricevere qualsiasi hover e fare clic su eventi. Invece lo passerà all'elemento sottostante.

È possibile controllare questo estremamente useful discussion per ulteriori dettagli sull'argomento.

Inoltre, tenere presente la compatibilità del browser di questa proprietà CSS. Probabilmente dovrai cercare un po 'per risposte definitive su come sia compatibile e con quali versioni.

Ecco la mia breve ricerca:

Pointer-Events Compatibility from Mozilla Dev Network

Pointer-Events Compatibility from 'Can I Use?'

Pointer-Events Tutorial and Some Compatibility Notes