1

Есть картинка

<img src="photo/ar1.jpg" href="#" alt="Изображения нет" title="Посмотреть большое фото" onclick="openRis(0)">

По нажатию на картинку должна вывестись эта же картинка, но в новом окне. По каким форумам только не лазил, не помогает ничего. Сделать надо с помощью JS!!! пробовал так

var w = window.open("about:blank","help", "width=300", "height=200");
w.document.open();
w.document.body.innerHTML("<img src='photo/ar1.jpg'>"); 

и так

var image = new Image();
image.src = "photo/ar1.j";
var width = image.width;
var height = image.height;
window.open(src,"Image","width=" + width + ",height=" + height);

и даже как-то так

var newWin=window.open("about:blank","hello","height=500,width=500");
var div = document.createElement('div');
div.className = "alert";

var newimg = document.createElement("img");
newimg.setAttribute("src","photo/ar1.jpg");
document.getElementById("alert").appendChild(newimg);

Уже веревку с мылом ищу, помогите, пожалуйста!

3 ответа 3

3

Попробуйте так:

const c = document.getElementById("my-image"); // берем картинку по id
const d = c.src; // берем ее src
const w = window.open('about:blank','new image'); // открываем окно
w.document.write("<img src='" + d + "' alt='from old image' />"); //  вставляем картинку

P.S. Прототип: https://jsfiddle.net/bauop5q8/2/

1

Пример на Codepen

var imgs = document.querySelectorAll("img");

for (var i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener("click", (e) => {
    let src = e.currentTarget.src;
    window.open("about:black", "image").document.write("<img src='" + src + "' alt='something' />");
  });
}
<img src="https://picsum.photos/200/300" alt="1">
<img src="https://picsum.photos/200/310" alt="2">
<img src="https://picsum.photos/200/320" alt="3">

1

Можно обернуть картинки в тег a и воспользоваться атрибутом target="_blank".

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" href="#" alt="Изображения нет" title="Посмотреть большое фото">
</a>

P.S. Сниппет не работает, смотрите в jsfiddle.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.