# mouseOver created object does not trigger function in p5

**URL:** <https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752>\
**Category:** Coding Questions\
**Created:** [November 23, 2019, 8:12pm UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752 "2019-11-23T20:12:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gjs](https://avatars.discourse-cdn.com/v4/letter/g/eada6e/32.png) [@gjs](https://discourse.processing.org/u/gjs)\
**Post date:** [November 23, 2019, 8:12pm UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/1 "2019-11-23T20:12:43Z")

</div>

Hi. I would be grateful for your thoughts as to why my code fails to print “mouse is over graphic” when I move the mouse over the image “pg.” (However, if I set it up as createCanvas rather than createGraphics, it works.) Thanks in advance!

```auto
let pg;
function setup() {
  createCanvas(400, 400);
  background(0);
  pg = createGraphics(200, 200);
  pg.clear();
  pg.mouseOver(over);
}

function draw() {
  //bottom layer;
  fill(0,0,200);
  rect(300,300,100,100);
  //top layer
  pg.fill(0,255,0);
  pg.rect(0,0,200,200);
  image(pg, 0, 0);
}

function over(){
  print("mouse is over graphic");
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 24, 2019, 3:16am UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/2 "2019-11-24T03:16:18Z")

</div>

-a- please format your code using the `</> code button ` from forum editor menu

-b- start p5.js from  
[https://p5js.org/reference/](https://p5js.org/reference/)  
and examples like  
[https://editor.p5js.org/p5/sketches/Input:\_Mouse\_Functions](https://editor.p5js.org/p5/sketches/Input:_Mouse_Functions)

-c- where you got that

```auto
.mouseOver(over);

```

from , looks like jquery?

---

<div class="post-metadata">

**Author:** ![gjs](https://avatars.discourse-cdn.com/v4/letter/g/eada6e/32.png) [@gjs](https://discourse.processing.org/u/gjs)\
**Post date:** [November 24, 2019, 4:29am UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/3 "2019-11-24T04:29:14Z")

</div>

Thanks for your reply. I’ll format the code appropriately in the future.

Re: the use of mouseOver, I’ve drawn from two p5-using examples:

[one which uses the canvas as the element](https://p5js.org/reference/#/p5.Element/mouseOver)

[another which uses text as the element](https://editor.p5js.org/kenzo/sketches/HkOlfH21g)

Both of these respond to the mouseOver function. But when I try something similar using a graphic as an element, the mouseOver does not function.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 24, 2019, 5:24am UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/4 "2019-11-24T05:24:54Z")

</div>

right,  
[https://p5js.org/reference/#/p5.Element](https://p5js.org/reference/#/p5.Element)  
does say  
[https://p5js.org/reference/#/p5/createGraphics](https://p5js.org/reference/#/p5/createGraphics)  
is a DOM element

* * *

well inside the canvas usually make our own OVER function as  
[https://p5js.org/reference/#group-Events](https://p5js.org/reference/#group-Events)  
not have that.  
using the pix position of rects…  
so i was thinking you want that, sorry

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 24, 2019, 11:17am UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/5 "2019-11-24T11:17:57Z")

</div>

These 3 p5 methods below:

1. **loadImage()** -\> [p5js.org/reference/#/p5/loadImage](http://p5js.org/reference/#/p5/loadImage)
2. **createImage()** -\> [p5js.org/reference/#/p5/createImage](http://p5js.org/reference/#/p5/createImage)
3. **createGraphics()** -\> [p5js.org/reference/#/p5/createGraphics](http://p5js.org/reference/#/p5/createGraphics)

They all create a `<canvas>` element:

> **[: The Graphics Canvas element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)**
>
> Use the HTML canvas element with either the canvas scripting API or the WebGL API to draw graphics and animations.

However, they’re mainly meant to be rendered to the sketch’s main  
p5.Renderer [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement):  
[p5js.org/reference/#/p5.Renderer](http://p5js.org/reference/#/p5.Renderer)

Via these 3 p5 methods below:

1. **image()** -\> [p5js.org/reference/#/p5/image](http://p5js.org/reference/#/p5/image)
2. **set()** -\> [p5js.org/reference/#/p5/set](http://p5js.org/reference/#/p5/set)
3. **background()** -\> [p5js.org/reference/#/p5/background](http://p5js.org/reference/#/p5/background)

B/c of that, they are created INVISIBLE!

Either b/c they’re not [appended](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to the browser’s DOM at all; such is the case of the p5.Image instance created by **createImage()** & **loadImage()**:  
[p5js.org/reference/#/p5.Image](http://p5js.org/reference/#/p5.Image)

Or in the case of the p5.Graphics instance created by **createGraphics()**:  
[p5js.org/reference/#/p5.Graphics](http://p5js.org/reference/#/p5.Graphics)

They’re indeed appended:

> <https://github.com/processing/p5.js/blob/0.10.2/src/core/p5.Graphics.js#L24-L29>

However, they’re explicitly made invisible:

> <https://github.com/processing/p5.js/blob/0.10.2/src/core/p5.Renderer.js#L33-L37>

As long as an element is invisible, it’s gonna ignore all user interaction events over it.

If you really wanna make your p5.Graphics instances created by p5::**createGraphics()** respond to user interaction events, you’re gonna have to make them visible 1st by invoking their method [p5.Element](https://p5js.org/reference/#/p5.Element)::**show()**:  
[p5js.org/reference/#/p5.Element/show](http://p5js.org/reference/#/p5.Element/show)

> <https://github.com/processing/p5.js/blob/0.10.2/src/dom/dom.js#L1954-L1957>

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 24, 2019, 11:26am UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/6 "2019-11-24T11:26:50Z")

</div>

> [@gjs](#):
>
> I’ll format the code appropriately in the future.

We can edit our own posts. So you can format your post here in the present. 😉

[Beautifier.io](http://Beautifier.io)

---

<div class="post-metadata">

**Author:** ![gjs](https://avatars.discourse-cdn.com/v4/letter/g/eada6e/32.png) [@gjs](https://discourse.processing.org/u/gjs)\
**Post date:** [November 24, 2019, 9:36pm UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752/7 "2019-11-24T21:36:54Z")

</div>

My thanks to both kil and GoToLooP for your replies. GoToLoop’s advice to insert the show() function did the trick. 👍