# Assigning mouseOver to object in instance mode

**URL:** <https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104>\
**Category:** Coding Questions\
**Created:** [January 15, 2020, 8:41pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104 "2020-01-15T20:41:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lnp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lnp/32/4911_2.png) [@lnp](https://discourse.processing.org/u/lnp)\
**Post date:** [January 15, 2020, 8:41pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104/1 "2020-01-15T20:41:15Z")

</div>

Hello peeps!

I don’t really see how I can assign a mouseOver listener to generated objects in instance mode. This doesn’t work for obvious reasons (looking for the function in the object). I tried  
`p.glyphs_to_show[n].mouseOver(p.displayGlyphLarge)` but that also didn’t work. Any help or pointers much appreciated! I somehow need to reference the p5js mouseover but also the object.

“Uncaught TypeError: Cannot read property ‘mouseOver’ of undefined”

```auto
	p.createGlyphList = function() {

		for (var n=0; n<p.glyphs_to_show.length; n++) {
			ng = new Glyph();
			ng.x = p.random(p.canvaswidth)
			ng.y = p.random(p.canvasheight)
			ng.w = p.glyph_width
			ng.h = p.glyph_height
			ng.col = p.random(100,255)
			ng.txt = p.glyphs_to_show[n];
			
			ng.mouseOver(p.displayGlyphLarge);
			p.allglyphs.push(ng);
		}

	}

```

---

<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:** [January 15, 2020, 9:04pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104/2 "2020-01-15T21:04:19Z")

</div>

> [@lnp](#):
>
> “Uncaught TypeError: Cannot read property ‘mouseOver’ of undefined”

**mouseOver()** is a method from `class` [p5.Element](https://p5js.org/reference/#/p5.Element):

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/mouseOver)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

You’re assigning an instance of `class` Glyph to variable _ng_: `ng = new Glyph();`

And later on you attempt to invoke method **mouseOver()** over that _ng_:  
`ng.mouseOver(p.displayGlyphLarge);`

Is Glyph somehow a subclass of p5.Element?

---

<div class="post-metadata">

**Author:** ![lnp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lnp/32/4911_2.png) [@lnp](https://discourse.processing.org/u/lnp)\
**Post date:** [January 15, 2020, 9:13pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104/3 "2020-01-15T21:13:49Z")

</div>

Well, I guess not looking at it. ng in my mind is just temporary naming. The question that’s turning me inside out is how to call that method when ng is not within p5.

I thought it might be `ng.p.mouseOver(p.displayGlyphLarge);` with p being set in the class constructor (`this.p = p;`), but alas no.

I also thought this may be it…

```auto
		for (var n=0; n<p.glyphs_to_show.length; n++) {
			p.ng = new Glyph();
			p.ng.x = p.random(p.canvaswidth)
			p.ng.y = p.random(p.canvasheight)
			p.ng.w = p.glyph_width
			p.ng.h = p.glyph_height
			p.ng.col = p.random(100,255)
			p.ng.txt = p.glyphs_to_show[n];
			
			p.ng.mouseOver(p.displayGlyphLarge);
			//p.glyphs_to_show[n].p.mouseOver(p.displayGlyphLarge);
			//p.sketchCanvas.mouseOver(p.displayGlyphLarge);
			//p.sketchCanvas.mouseClicked(p.canvasClicked);
			p.allglyphs.push(p.ng);
		}

```

---

<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:** [January 15, 2020, 9:20pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104/4 "2020-01-15T21:20:36Z")

</div>

> [@lnp](#):
>
> I thought it might be `ng.p.mouseOver(p.displayGlyphLarge);` with _p_ being set in the class constructor ( `this.p = p;` ), but alas no.

Giving **mouseOver()** is a method of `class` p5.Element, we access it via an instance of it, regardless we’re using the global or instance mode approach.

It seems to me that property _p_ from your `class` Glyph is of datatype p5; which obviously isn’t a p5.Element!

---

<div class="post-metadata">

**Author:** ![lnp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lnp/32/4911_2.png) [@lnp](https://discourse.processing.org/u/lnp)\
**Post date:** [January 15, 2020, 9:40pm UTC](https://discourse.processing.org/t/assigning-mouseover-to-object-in-instance-mode/17104/5 "2020-01-15T21:40:40Z")

</div>

Aye aye aye. Now I see! Thanks for your patience.

So _talking out loud_ I need to check canvas mouse position relative to all objects, if within bounds do something else back to default.

Aye caramba!