CODEWITHSUNDEEP
javascripthtmlimage
Nagappa L M
Nagappa L M

Reputation: 1480

HTML open fresh new window again on image onclick

Trying different options like I have page opened in new window below opens in newtab

 <a href="imageurl" target="_blank">
        <img src="imageurl" style="width: 50%; height: 220px;">
  </a>

Below overrides the current window

<img src="imageurl" style="width: 50%; height: 220px;" onclick="window.open(this.src)">

Looking to open in new window again. Please suggest

Upvotes: 0

Views: 10957

Answers (2)

Quentin
Quentin

Reputation: 943615

To trigger a new window instead of a new tab (something you should generally be reluctant to do) you need to specify some window features which the browser won't apply to a tab.

Setting resizable is sufficient in Chrome. I haven't tested in other browsers.

HTML:

<a href="http://placekitten.com/100/100" target="_blank">
  <img src="http://placekitten.com/100/100">
</a>

JS:

const openInNewWindow = event => {
  event.preventDefault();
  const {href, target} = event.currentTarget;
  const features = "resizable";
  window.open(href, target, features);
};


document.querySelector("a")
  .addEventListener("click", openInNewWindow);

(Don't bind click event listeners to images, they aren't designed as interactive controls. Users who depend on (for example) a screen reader or a keyboard focus to interact with a document will find it difficult or impossible to trigger a click on an image. Use semantic markup. If you are linking something, use a link, then enhance with JS.)

Upvotes: 8

avtar singh
avtar singh

Reputation: 22

Try like

window.open(this.src,"_blank");

Upvotes: -1

Related Questions