# How to use an image as a link between different html pages

**URL:** <https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487>\
**Category:** Coding Questions\
**Created:** [April 19, 2021, 6:37am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487 "2021-04-19T06:37:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [April 19, 2021, 6:37am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487/1 "2021-04-19T06:37:51Z")

</div>

I see you can use `createA()` in P5 to add hyperlinks on texts, is there anyway to use an image as a hyperlink in P5?

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<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:** [April 19, 2021, 6:58am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487/2 "2021-04-19T06:58:02Z")

</div>

Although the images don’t show up due to the site they link to doesn’t exist anymore you can still study the sketch from the link below on how to place a **createImg()** as a child element of a **createA()** using the method **parent()**:

> **[JSON Religious Articles](http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc)**
>
> GoSubRoutine’s Block bef70ffdae5e1a052ade9c6b15f737cc

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [April 19, 2021, 9:21am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487/3 "2021-04-19T09:21:14Z")

</div>

Here is what I come up with

```auto
let img;

function setup() {
  createCanvas(400, 400);
  link = createA('http://www.p5js.org/', '','top');
}

function draw() {
  img=createImg('asterisk.png','www.p5js.org').parent(link);
  img.position(0, 0);
  img.size(img.width,img.height);
}

```

The image does have a link now, thanks for pointing the direction.  
Just wanna make sure this is the correct way to use the method **parent()**  
and also, for some reason the third parameter of **CreateA** function doesn’t seem to work correctly.

![asterisk](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4258906f2b6e9386a2445c32de6b17c0319fe504.png)

---

<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:** [April 19, 2021, 11:19am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487/4 "2021-04-19T11:19:53Z")

</div>

> [@juju](#):
>
> … the third parameter of **CreateA** function doesn’t seem to work correctly.

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

`link = createA('http://www.p5js.org/', '','top');`  
`link = createA('http://www.p5js.org/', '','_top');`

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 19, 2021, 11:32am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487/5 "2021-04-19T11:32:55Z")

</div>

Oh by the way you shouldn’t `createImg` in the draw loop - which will generate the DOM every frame instead of making it once.