{"id":129,"date":"2024-06-07T19:13:54","date_gmt":"2024-06-08T03:13:54","guid":{"rendered":"https:\/\/www.tonybhimani.com\/programming-blog\/?p=129"},"modified":"2024-06-07T19:15:50","modified_gmt":"2024-06-08T03:15:50","slug":"dynamic-button-images-implementing-javascript-touch-input","status":"publish","type":"post","link":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/","title":{"rendered":"Dynamic Button Images: Implementing JavaScript Touch Input"},"content":{"rendered":"\r\n<p>In a recent web application, I wanted to create a dynamic effect where button images change between pressed and unpressed states using touch input. This effect is especially appealing on mobile devices. When you tap and hold the button, the image switches to the pressed state. If you slide your finger off, it reverts to the unpressed state, and it toggles back and forth seamlessly. Additionally, you can trigger an action event when the tap (click) occurs.<\/p>\r\n\r\n\r\n\r\n<p>Here is some sample code that demonstrates this effect using JavaScript touch events. Feel free to incorporate it into your projects.<\/p>\r\n\r\n\r\n<pre><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;style&gt;\r\n.container {\r\n\tposition: absolute;\r\n\ttop: 100;\r\n\tleft: 100;\r\n}\r\nbutton {\r\n\tborder: none;\r\n\tbackground-color: transparent;\r\n\ttouch-action: none;\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;div class=&quot;container&quot;&gt;\r\n  &lt;button id=&quot;clickMe&quot;&gt;\r\n    &lt;img id=&quot;buttonImage&quot; width=&quot;400&quot; height=&quot;200&quot; src=&quot;button_off.png&quot;&gt;\r\n  &lt;\/button&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\nlet rect;\r\nlet buttonIsPressed;\r\n\r\nconst clickMe = document.getElementById(&quot;clickMe&quot;);\r\nconst buttonImage = document.getElementById(&quot;buttonImage&quot;);\r\n\r\nconst eventType = &quot;ontouchend&quot; in document ? &quot;touchend&quot; : &quot;click&quot;;\r\n\r\nif (buttonImage) {\r\n  rect = buttonImage.getBoundingClientRect();\r\n}\r\n\r\nfunction onTouchStart() {\r\n  console.log(&quot;onTouchStart&quot;);\r\n  buttonIsPressed = true;\r\n  if (buttonImage) buttonImage.src = &quot;button_on.png&quot;;\r\n}\r\n\r\nfunction onTouchMove(e) {\r\n  if (buttonImage) {\r\n    if (e.touches&#x5B;0].clientX &gt;= rect.x &amp;&amp; e.touches&#x5B;0].clientX &lt;= (rect.x + rect.width) &amp;&amp;\r\n          e.touches&#x5B;0].clientY &gt;= rect.y &amp;&amp; e.touches&#x5B;0].clientY &lt;= (rect.y + rect.height)) {\r\n      buttonImage.src = &quot;button_on.png&quot;;\r\n      buttonIsPressed = true;\r\n    } else {\r\n      buttonImage.src = &quot;button_off.png&quot;;\r\n      buttonIsPressed = false;\r\n    }\r\n  }\r\n}\r\n\r\nfunction onTouchEnd() {\r\n  console.log(&quot;onTouchEnd&quot;);\r\n  buttonIsPressed = false;\r\n  if (buttonImage) buttonImage.src = &quot;button_off.png&quot;;\r\n}\r\n\r\nif (clickMe) {\r\n  clickMe.addEventListener(eventType, () =&gt; {\r\n    if (!buttonIsPressed) return;\r\n    console.log(&quot;Event Triggered : Button Pressed&quot;);\r\n  });\r\n\r\n  clickMe.addEventListener(&quot;touchstart&quot;, onTouchStart, { passive: true});\r\n  clickMe.addEventListener(&quot;touchmove&quot;, onTouchMove, { passive: true});\r\n  clickMe.addEventListener(&quot;touchend&quot;, onTouchEnd, { passive: true});\r\n}\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre><\/pre>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>In a recent web application, I wanted to create a dynamic effect where button images change between pressed and unpressed states using touch input. This effect is especially appealing on mobile devices. When you tap and hold the button, the image switches to the pressed state. If you slide your finger off, it reverts to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[18,19,17],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-scripts","tag-dynamic-button-images","tag-javascript","tag-touch-input"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal<\/title>\n<meta name=\"description\" content=\"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal\" \/>\n<meta property=\"og:description\" content=\"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\" \/>\n<meta property=\"og:site_name\" content=\"Tony&#039;s Programming Blog and Development Journal\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-08T03:13:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-08T03:15:50+00:00\" \/>\n<meta name=\"author\" content=\"Tony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:site\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\"},\"author\":{\"name\":\"Tony\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"headline\":\"Dynamic Button Images: Implementing JavaScript Touch Input\",\"datePublished\":\"2024-06-08T03:13:54+00:00\",\"dateModified\":\"2024-06-08T03:15:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\"},\"wordCount\":105,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"keywords\":[\"dynamic button images\",\"javascript\",\"touch input\"],\"articleSection\":[\"Scripts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\",\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\",\"name\":\"Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#website\"},\"datePublished\":\"2024-06-08T03:13:54+00:00\",\"dateModified\":\"2024-06-08T03:15:50+00:00\",\"description\":\"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tonybhimani.com\/programming-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dynamic Button Images: Implementing JavaScript Touch Input\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#website\",\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/\",\"name\":\"Tony's Programming Blog and Development Journal\",\"description\":\"Sharing is caring... Especially with code\",\"publisher\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tonybhimani.com\/programming-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\",\"name\":\"Tony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"caption\":\"Tony\"},\"logo\":{\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\"},\"sameAs\":[\"https:\/\/tonybhimani.com\/programming-blog\",\"https:\/\/x.com\/TonyBhimani\",\"https:\/\/www.youtube.com\/tonybhimani\"],\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/author\/coding_magik\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal","description":"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal","og_description":"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.","og_url":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/","og_site_name":"Tony&#039;s Programming Blog and Development Journal","article_published_time":"2024-06-08T03:13:54+00:00","article_modified_time":"2024-06-08T03:15:50+00:00","author":"Tony","twitter_card":"summary_large_image","twitter_creator":"@TonyBhimani","twitter_site":"@TonyBhimani","twitter_misc":{"Written by":"Tony","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#article","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/"},"author":{"name":"Tony","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"headline":"Dynamic Button Images: Implementing JavaScript Touch Input","datePublished":"2024-06-08T03:13:54+00:00","dateModified":"2024-06-08T03:15:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/"},"wordCount":105,"commentCount":0,"publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"keywords":["dynamic button images","javascript","touch input"],"articleSection":["Scripts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/","url":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/","name":"Dynamic Button Images: Implementing JavaScript Touch Input - Tony&#039;s Programming Blog and Development Journal","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website"},"datePublished":"2024-06-08T03:13:54+00:00","dateModified":"2024-06-08T03:15:50+00:00","description":"Learn how to create dynamic button image transitions using JavaScript touch events in this tutorial. Perfect for mobile devices.","breadcrumb":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/dynamic-button-images-implementing-javascript-touch-input\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tonybhimani.com\/programming-blog\/"},{"@type":"ListItem","position":2,"name":"Dynamic Button Images: Implementing JavaScript Touch Input"}]},{"@type":"WebSite","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website","url":"https:\/\/www.tonybhimani.com\/programming-blog\/","name":"Tony's Programming Blog and Development Journal","description":"Sharing is caring... Especially with code","publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tonybhimani.com\/programming-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88","name":"Tony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","caption":"Tony"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g"},"sameAs":["https:\/\/tonybhimani.com\/programming-blog","https:\/\/x.com\/TonyBhimani","https:\/\/www.youtube.com\/tonybhimani"],"url":"https:\/\/www.tonybhimani.com\/programming-blog\/author\/coding_magik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":24,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/129\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}