Question

Basically, I have a little arrow key graphic I want displayed for desktop browsers, to tell users they can navigate the site with the arrow keys on their keyboard. However, I want to change this image to a fingerprint graphic if the site is loaded on a touch device.

I’m a novice when it comes to JavaScript, so I’m not sure how to go about this.

Any ideas?

Answer 1

You need to determine if the browser supports touch. You can do this with user agent detection, or by using one of Modernizr’s techniques. (http://modernizr.github.com/Modernizr/touch.html) Different techniques work in different cases, so you may need to use user agent detection.

function isTouchDevice() {  
   try {  
      document.createEvent("TouchEvent");  
      return true;  
   } catch (e) {  
      return false;  
   }  
}

Then you can set your image source

if (isTouchDevice()) {
   document.getElementById("myImage").src = "fingerprint.png";
}