jQuery Plugin für pixelgenaue Gebäudeauswahl

Eine genaue Auswahl von Gebäuden in einer durch Grafiken aufgebauten ISO Ansicht, ist mit reinem Html nicht machbar. Ein einfacher Hover Effekt funktioniert da nicht mehr, da transparente Bereiche ebenfalls zum Bild gehören.

Ich habe die neue ISO Ansicht der Stadt durch einzelne absolut positionierte Bilder aufgebaut. In der alten Ansicht ist dies noch durch Unmengen an div Containern gelöst. Dabei entsteht das Problem der überlappenden Bilder. Per normalem Hover Effekt ist ausschließlich das oberste Objekt im HTML selektierbar. Dadurch sind Gebäude, welche hinter einem transparenten Bereich eines anderen Bildes liegen, nicht auswählbar.

Hover Standardverhalten

Diese Gebäude erhalten beim darüber fahren einen roten Rahmen. Das Gebäude dahinter ist erst wählbar, wenn die Maus den roten Rahmen des vorderen Gebäudes verlässt.

Deutlich ist dieses Verhalten sichtbar, wenn die Maus langsam vom blauen Punkt nach unten fährt. Nacheinander wird das Sägewerk, das Kontor und die Kirche selektiert, obwohl optisch die Maus noch auf dem Sägewerk ist.

Aufpeppen per jQuery Plugin

Um das normale Verhalten zu ändern habe ich mein erstes jQuery Plugin geschrieben. In diesem Beispiel reagiert die Auswahl explizit auf die nicht transparenten Bereiche der Bilder. Dies ermöglicht das Kontor zwischen den beiden Türmen der Kirche hindurch zu selektieren.

Wie funktioniert es?

Das Plugin fragt den den jeweiligen Pixel in einem Bild unter dem Mauszeiger ab. Ist dieser Pixel transparent gräbt es sich bei Bedarf in der Bildhierarchie nach unten durch. Das erste ermittelte Bild mit einem nicht transparenten Pixel wird an die Callback Funktion übergeben. Die Callback Funktion ermittelt den Namen des Hover Bildes (in diesem Falle der weiße Schein) und fügt dies in die Webseite ein.

Nutzung des jQuery Plugins

Einbinden der Funktionalität per:

$('.selection').imageStack({
   over: function( obj ){
      // hier eigene Routine einfügen
   },
   click: function( obj ){
      // hier eigene Routine einfügen
   }
});

Meine Callback Funktion für den demonstrierten Effekt:

function( obj ){
  $('#hoverImg').remove();
  $(obj).parent().append(
    $(document.createElement('img'))
      .attr({
        id: 'hoverImg',
        src: $(obj).attr( 'src' ).replace( '.png', '-hover.png' )
      })
     .css({
       right: ( parseInt( $(obj).css('right') ) - 10 ) + 'px',
       bottom: ( parseInt( $(obj).css('bottom') ) - 10 ) + 'px',
       'z-index': parseInt( $(obj).css('z-index') )-1
     })
   );
}

Achtung: Damit das Ermitteln der transparenten Bereich korrekt funktioniert, muss bei den Bildern eine Höhe und Breite angegeben sein. Dies kann per Stylesheet oder per direkter Angabe im HTML Code geschehen.

Download des Plugins: » » jquery.imagestack.js « «

Aktuell getestete Browser: Chromium 22, Firefox 3-10

Bei Verwendung: bitte einen Link auf diese Seite hier setzen 😉

Update

Für ältere Browser, welche das Canvas Element noch nicht unterstützen, wurde ein Fallback auf die normale Hover Funktionalität eingebaut.

Update zum Sonntag Abend »« Balancing und experimentelle Stadtansicht