# mouseClicked function using an image
**URL:** https://discourse.processing.org/t/mouseclicked-function-using-an-image/9795
**Category:** Coding Questions
**Created:** [March 30, 2019, 5:10pm UTC](https://discourse.processing.org/t/mouseclicked-function-using-an-image/9795 "2019-03-30T17:10:01Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@mvincee](https://discourse.processing.org/u/mvincee)
#### Post date: [March 30, 2019, 5:10pm UTC](https://discourse.processing.org/t/mouseclicked-function-using-an-image/9795/1 "2019-03-30T17:10:01Z")
I have four emojis displaying in a canvas. Each image when clicked will change the background. For example, smiling face, a rising sun will appear. First question, how do I use the mouseClicked event on an image? Second, how do I trigger/call the created “class” (which contains the background) for each image after the mouse event? Is it a draw function under the mouse event?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 31, 2019, 3:31am UTC](https://discourse.processing.org/t/mouseclicked-function-using-an-image/9795/2 "2019-03-31T03:31:40Z")
Just loop over the container & check whether the mouse coordinates are inside each image area: ➿
> **[Collision Detection](http://jeffreythompson.org/collision-detection/point-rect.php)**
>
> An online book about collision detection using Processing.
Here’s some online sketch w/ a grid of squares. They’re not images, but the principle is the same: 😉
[Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx)