Dienstag, 28. Juni 2011

Crossbrowser Pfeiltastensteuerung in die Webseite einbauen

Die meisten Seiten, auf welchen man Fotos anschauen kann, verfügen heute über die Möglichkeit mit den Pfeiltasten zum nächsten Foto zu gelangen. Eine solche Möglichkeit der Pfeilsteuerung lässt sich problemlos in die eigene Seite, z.B. in eine Fotogallery, einbauen und funktioniert in allen gängigen und modernen Browsern (IE, Chrome, Firefox):

JavaScript Code:

   nn=(document.layers)?true:false;
   ie=(document.all)?true:false;

   function keyDown(e) {
      var evt=(e)?e:(window.event)?window.event:null;
      if(evt){
         var key=(evt.charCode)?evt.charCode:((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));
         if(key == "39") // 39 = Rechts
             self.location.href='http://domain.ch/file.php/vowaerts';
         if(key == "37") // 37 = links
             self.location.href='http://domain.ch/file.php/zurueck';
         }
      }

   document.onkeydown=keyDown;
   if(nn) document.captureEvents(Event.KEYDOWN);

Man muss lediglich die Platzhalter "http://domain.ch/file.php/zurueck" und "http://domain.ch/file.php/vorwaerts" auf die richtige URL anpassen.

Eine entsprechende Integration findet Ihr auf meiner Gallery.

Keine Kommentare:

Kommentar veröffentlichen