How do I change an image if the browser is on a touch device?

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?

This thread might be helpful- http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript — infocyde, Oct 07 '11 at 22:12

jSource · Accepted Answer · 2011-10-11T01:24:00.217

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";
}

edited Oct 11 '11 at 01:24

answered Oct 09 '11 at 11:36

jSource

524
2
5

Thanks to everyone. However, this spelled it out perfectly for my level of understanding. A note to others: you should delete the right parenthesis after "fingerprint.png". – sharcupine Oct 11 '11 at 00:41
Good catch. I fixed the parenthesis. – jSource Oct 11 '11 at 01:24

How do I change an image if the browser is on a touch device?

1 Answers1