Open a new tab by clicking on img with mousePressed?

p5.js Coding Questions
1

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!

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');

}
}
2
3

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:-

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

1 Like
4

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.

if (mouseX>250 && mouseX<350 && mouseY > 150 && mouseY < 250 && mouseIsPressed){
	window.open("http://www.rabbitmatters.com/baby-rabbits.html");
      } else {
5

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.

1 Like
6

Is this sufficient to stop? I tried something silimar with a “popup” variable and was unsuccessful.

7

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:

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
  }
}
1 Like