# Clickable Image

**URL:** <https://discourse.nodered.org/t/clickable-image/18983>\
**Category:** Dashboard\
**Created:** [10 December 2019 10:32 UTC](https://discourse.nodered.org/t/clickable-image/18983 "2019-12-10T10:32:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dr\_cave\_dweller](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@dr\_cave\_dweller](https://discourse.nodered.org/u/dr_cave_dweller)\
**Post date:** [10 December 2019 10:32 UTC](https://discourse.nodered.org/t/clickable-image/18983/1 "2019-12-10T10:32:00Z")

</div>

Hi all,

I want to place an image onto the dash board and make the image clickable, so that it makes you go to the next tab.

Any suggestions on how to do this?

I tried making a background image then floating a transparent button over the image but its not working. The inbuilt dashboard button will not do it, so I have tried using a dasbhoard UI\_Template. I placed an image into the background. I borrowed some code from scargill ([https://tech.scargill.net/node-red-dashboard-template-buttons-updated/](https://tech.scargill.net/node-red-dashboard-template-buttons-updated/)) and made the button transparent using opacity function.

I was hoping the button would float over the image that you could see behind. But it is not working as expected. I think there must be a better way to do this, is there a way to just make an image clickable? Any help appreciated. Thanks!

```auto
[{"id":"4bb58e63.67338","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"164c35e1.6ad53a","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","waitfor":"","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"8b6aea82.5fc018","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"Arial,Arial,Helvetica,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"kallos_display","default":"#4B7930","baseColor":"#000000","baseFont":"Arial,Arial,Helvetica,sans-serif","reset":false},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":true},"page-titlebar-backgroundColor":{"value":"#097479","edited":true},"page-backgroundColor":{"value":"#111111","edited":true},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":true},"group-borderColor":{"value":"#555555","edited":true},"group-backgroundColor":{"value":"#333333","edited":true},"widget-textColor":{"value":"#eeeeee","edited":true},"widget-backgroundColor":{"value":"#097479","edited":true},"widget-borderColor":{"value":"#333333","edited":true},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"true","allowSwipe":"false","lockMenu":"false","allowTempTheme":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":24,"sy":24,"gx":24,"gy":24,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"5fe7bd86.2270e4","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"ed346673.8581d8","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b1cd1006.8b583","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"3e54fac6.1cf0c6","type":"modbus-client","z":"","name":"PTronik ECO","clienttype":"serial","bufferCommands":false,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"2","serialParity":"none","serialConnectionDelay":"500","unit_id":"5","commandDelay":"10","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"86200213.ed3e2","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"b83b9a00.e641f8","type":"modbus-client","z":"","name":"2ndser","clienttype":"simpleser","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"COM8","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"ed14a9a6.314878","type":"ui_group","z":"","name":"Main_Page_Room_1","tab":"5fe7bd86.2270e4","order":2,"disp":false,"width":"20","collapse":false},{"id":"b52d7e75.0cd7","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","waitfor":"","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"ec644a88.dab798","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"a928dc16.e3367","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"e89bc95b.c65ec8","type":"modbus-client","z":"","name":"PTronik ECO","clienttype":"serial","bufferCommands":false,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"2","serialParity":"none","serialConnectionDelay":"500","unit_id":4,"commandDelay":10,"clientTimeout":1000,"reconnectTimeout":2000},{"id":"a05375c4.202d58","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"6a63be45.ebe96","type":"modbus-client","z":"","name":"2ndser","clienttype":"simpleser","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"COM8","serialType":"RTU-BUFFERD","serialBaudrate":"9600","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"78f0a934.552d68","type":"ui_group","z":"","name":"Main_Page_Room_2","tab":"5fe7bd86.2270e4","order":3,"disp":false,"width":"20","collapse":false},{"id":"ba5c6f1f.f927a","type":"ui_group","z":"","name":"Main_Page_Button","tab":"5fe7bd86.2270e4","order":1,"disp":false,"width":"60","collapse":false},{"id":"2125a22c.0b384e","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2},{"id":"65d810ec.bb4df","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button Image","order":1,"width":"23","height":"13","format":"<style>\n #Home_Main_Page_Button{\n background-image:url(\"../Bottom_Logo_Horizontal.jpg\" );\n background-repeat:no-repeat;\n background-size:contain;\n background-position:center center;\n }\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":100,"wires":[[]]},{"id":"7e048166.e96df","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button_Style","order":2,"width":"9","height":"5","format":"<style>\n \n:root {\n --myHighlight:url('');\n}\n \n.filled { \n height: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n \n.filled { \n height: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n background-color: transparent !important;\n }\n \n.nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n.rounded {\n border-radius: 10px 10px 10px 10px;\n font-size: 18px;\n}\n \n.highlight {\n background-color: gray !important;\n}\n \n.images {\n background-size: 100% 100%;\n background-repeat: no-repeat; \n }\n \n.highlight-image {\n background-image: var(--myHighlight) !important;\n}\n \n</style>\n \n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(80);\n});\n \n$('.touched').on('mousedown', function() {\n$(this).addClass('highlight');\nsetTimeout(() => $(this).removeClass('highlight'), 100);\n});\n \n$('.touched-image').on('mousedown', function() {\n$(this).addClass('highlight-image');\nsetTimeout(() => $(this).removeClass('highlight-image'), 200);\n});\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":390,"y":160,"wires":[["5bd0e443.b18d8c"]]},{"id":"5bd0e443.b18d8c","type":"ui_template","z":"4bb58e63.67338","group":"ba5c6f1f.f927a","name":"Button","order":3,"width":"9","height":"5","format":"<md-button class=\"vibrate filled touched rounded\"\n style=\"background-color:#000000; opacity:0.5\"\n ng-click=\"send({payload: 'on'})\"> \n On\n</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":550,"y":160,"wires":[[]]}]

```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [10 December 2019 10:56 UTC](https://discourse.nodered.org/t/clickable-image/18983/2 "2019-12-10T10:56:21Z")

</div>

One possible way is by using HTML image maps.

[https://www.w3schools.com/html/html\_images\_imagemap.asp](https://www.w3schools.com/html/html_images_imagemap.asp)

You will use angular ng-click directive inside the html code, to send a message from the front end to the runtime. Something like below (not working example though - just a pointer).

```auto
ng-click="send({topic: 'command', payload: 'tabchange'})"

```

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [11 December 2019 13:21 UTC](https://discourse.nodered.org/t/clickable-image/18983/3 "2019-12-11T13:21:58Z")

</div>

Hi

I have used [https://github.com/bartbutenaers/node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg). You are able to have clickable images and menus etc. There are examples to get you going also great support

---

<div class="post-metadata">

**Author:** ![dr\_cave\_dweller](https://avatars.discourse-cdn.com/v4/letter/d/71e660/32.png) [@dr\_cave\_dweller](https://discourse.nodered.org/u/dr_cave_dweller)\
**Post date:** [16 December 2019 07:12 UTC](https://discourse.nodered.org/t/clickable-image/18983/4 "2019-12-16T07:12:43Z")

</div>

Thanks guys. Just closing this out to help others.

The HTML image map link given gave me some ideas and I managed to solve the issue.

```auto
<button ng-click="send({payload:'tabxx'})">
<img src="../xxxx.jpeg"/>
</button>

```

Where tabxx is the name of the tab (or you can use the tab number) and xxx.jpeg is the image file name. Need to place the ui\_control node after the ui\_template node with above code in it. You need to play around with a bunch of CSS to get the borders and background colors correct.

---

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [21 February 2022 16:42 UTC](https://discourse.nodered.org/t/clickable-image/18983/5 "2022-02-21T16:42:24Z")

</div>

Can I make a button with a background image and also have a text input on the button??