# Open a new tab by clicking on img with mousePressed?
**URL:** https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106
**Category:** Coding Questions
**Created:** [January 16, 2021, 1:28am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106 "2021-01-16T01:28:13Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@moedigs](https://discourse.processing.org/u/moedigs)
#### Post date: [January 16, 2021, 1:28am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/1 "2021-01-16T01:28:13Z")
I’m attempting to load an img, and open a new tab/website with mousePressed
when someone clicks on the img or within the space of the Canvas.
It’s on a page with multiple sketches
So I want to restrict the activated area to the canvas
Or a tightly delineated area within the Canvas (I’ve seen the coordinates for how to do this in multiple ways, but my main concern is creating a clickable element that opens a webpage in a new tab or window).
I’ve seen functions of LoadImage that call an img from a link, but not ones that embed a link in that image
And in using CreateA, I keep getting told that “\_blank” is not functioning.
(Unsurprisingly, it draws a link at the edge of the canvas, which I’m also not opposed to, but then I can’t open it in a new tab, because \_blank doesn’t function)
Below is just the relevant portion of the code, my latest attempt: I’m guessing I’m taking a bit of a haphazard approach here. Any input appreciated. Thanks!
```auto
let img;
let cnv;
var link;
function preload() {
img = loadImage('bunny.jpg');
}
function setup() {
cnv = createCanvas(windowWidth, windowHeight);
background(255,8,16);
cnv.mousePressed(reveal);{
createA('http://www.rabbitmatters.com/baby-rabbits.html',
'baby bunnies');
}
function reveal() {
createA('http://www.rabbitmatters.com/baby-rabbits.html', 'baby bunnies');
}
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 16, 2021, 3:33am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/2 "2021-01-16T03:33:12Z")
> **[JSON Religious Articles](http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc)**
>
> GoSubRoutine’s Block bef70ffdae5e1a052ade9c6b15f737cc
---
### Author:  [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)
#### Post date: [January 16, 2021, 8:12am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/3 "2021-01-16T08:12:36Z")
if u want just to open a new tab and not to create a link just use plain javascript to open the page
link `window.open("http://www.rabbitmatters.com/baby-rabbits.html");`
detect if someone clicks the image then run the function written above it will open a new tab
for eg:-
```auto
if(mouseY<(img.height-pos.y) && mouseX<(img.width-pos.x) ){
window.open("http://www.rabbitmatters.com/baby-rabbits.html");
}
```
`pos.x` and `pos.y` being the x and y coordinates for the image
---
### Author:  [@moedigs](https://discourse.processing.org/u/moedigs)
#### Post date: [March 10, 2021, 12:42am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/4 "2021-03-10T00:42:59Z")
Successfully getting windows to open! But now they won’t stop! Trying to restrict the windows to opening once when the center of the sketch is clicked, but they are opening endlessly.
```auto
if (mouseX>250 && mouseX<350 && mouseY > 150 && mouseY < 250 && mouseIsPressed){
window.open("http://www.rabbitmatters.com/baby-rabbits.html");
} else {
```
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 10, 2021, 10:59am UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/5 "2021-03-10T10:59:40Z")
yes it won’t stop because draw function is called every frame and `mouseIsPressed` is true while you hold the button even for a fraction of a second. You may need a boolean value to say that the window is opened, and skip opening the window again if the boolean is already true.
Another solution may be to store the value returned by `window.open` as a global variable, let’s say `w = window.open` and if `w` already contains an object (i.e. the window is opened) then skip opening another window.
---
### Author:  [@moedigs](https://discourse.processing.org/u/moedigs)
#### Post date: [March 10, 2021, 3:41pm UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/6 "2021-03-10T15:41:16Z")
> [@moedigs](#):
>
> So something like this? Not sure how I indicate that a window is already open.
>
> ```auto
> var w
>
> if (mouseX>250 && mouseX<350 && mouseY > 150 && mouseY < 250 && mouseIsPressed){
> w = true
> window.open("http://www.rabbitmatters.com/baby-rabbits.html");
> } else {
> w = false
> }
>
> ```
Is this sufficient to stop? I tried something silimar with a “popup” variable and was unsuccessful.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 10, 2021, 5:11pm UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106/7 "2021-03-10T17:11:37Z")
almost! you have to use the w variable to check if the window is open or not. And this variable is set to false again only when you are not clicking or you are not in the range:
```auto
var w = false
...
if (mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250 && mouseIsPressed && w == false) {
w = true
window.open("http://www.rabbitmatters.com/baby-rabbits.html");
}
if (!(mouseX > 250 && mouseX < 350 && mouseY > 150 && mouseY < 250 && mouseIsPressed)) {
w = false
}
}
```