jQuery Plugin für pixelgenaue Gebäudeauswahl

Patrizier Sven
imageStack jQuery Plugin

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.

Kirche
Sägewerk
Kontor

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.

KircheSägewerkKontor

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.


»«

2 Kommentare zu “jQuery Plugin für pixelgenaue Gebäudeauswahl”

  • mcroll sagt dazu:

    Also hier in der Firma funktioniert nur dein altes script mit dem Hover 🙂 Aber das ist hier auch ein alter Browser. (IE 7)

    Antworten
    • Sven sagt dazu:

      Für den Effekt wird das canvas Element benötigt, welches der alte IE (ich glaube bis 9) noch nicht unterstützt

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.