Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2021, 11:32
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Вывод изображение по координатам при нажатии кнопки
Здравствуйте. Есть 2 штуки button - красная и зеленая при нажатии на которые выводятся изображения которые накладываются друг на друга, нужно как-то организовать тоже самое только что бы эти изображения выводились в заданных координатах. Алгоритм такой: нажал на зеленую кнопку появилось 1-е изображение, нажал на красную кнопку первое исчезло и появилось 2-е изображение.
<style>
.green_button_2 {
      background-image: url("img/Green Button.png"); /*фон красной кнопки*/
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
      cursor: pointer;
    }
    .red_button_2{
      background-image: url("img/Red Button.png"); /*фон зеленой кнопки */
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
      cursor: pointer;
    } </style>
<button class="show-image red_button_2" data="img/red led.png" type="button" id="click_red2"></button>   <!--1-е изображение red led.png -->
<button class="show-image green_button_2" data="img/Gren led.png" type="button" id="click_green2"></button>   <!-- 2-е изображение Gren led.png -->
<div id="open_img"></div>

window.onload = function(){
  let buttons = document.querySelectorAll('.show-image');
 
  buttons.forEach(function(btn){
    btn.addEventListener('click', function(){
 
      document.getElementById('open_img').innerHTML = '';
 
      let link = this.getAttribute('data');
      let img = document.createElement('img');
 
      img.src = link;
 
      document.getElementById('open_img').append(img);
 
    });
  });
};
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2021, 11:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

sssema96,
<button class="show-image red_button_2" data-link="img/red led.png"
data--top="" data-left=""
type="button" id="click_red2"></button>

Сообщение от sssema96
this.getAttribute('data');


читать про dataset
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2021, 19:39
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
Прочитал про dataset. Не совсем ясно решение.
<button class="show-image red_button_2" data-link="img/red led.png"
data-top="500px" data-left="800px"
type="button" id="click_red2"></button>

В JS изменил
let link = document.button.dataset.link;
let img = document.createElement('img');
      img.src = link;
Не работает и не совсем ясно как с data-top и data-left работать.
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2021, 19:55
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,677

window.onload = function(){
  let buttons = document.querySelectorAll('.show-image');
  
  buttons.forEach(function(btn){
    btn.addEventListener('click', function(){
  
      document.getElementById('open_img').innerHTML = '';
      let img = document.createElement('img');
      img.style.position = 'absolute';
      img.style.left = btn.dataset.left
      img.style.top = btn.dataset.top
      img.src = btn.dataset.link;
  
      document.getElementById('open_img').append(img);
  
    });
  });
};
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2021, 20:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

sssema96,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .green_button_2 {
            background-image: url("img/Green Button.png"); /*фон красной кнопки*/
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        .red_button_2{
            background-image: url("img/Red Button.png"); /*фон зеленой кнопки */
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        body{
            position: relative;
        }
        #open_img{
            position: absolute;
        }
        .show-image{
            outline: none;
        }
    </style>
<script>
window.addEventListener( "load" , function() {
const buttons = document.querySelectorAll('.show-image'),
div = document.getElementById('open_img'),
img = new Image;
    buttons.forEach(function(btn){
        const {link, top, left} = btn.dataset;
        btn.addEventListener('click', function(){
            img.src = link;
            div.append(img);
            Object.assign(div.style, {top,left})
        });
    });
  });
</script>
</head>
<body>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?1"
data-top="100px" data-left="80px"
type="button" id="click_red2"></button>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?2"
data-top="200px" data-left="280px"
type="button" id="click_red2"></button>
<div id="open_img"></div>
</body>
</html>

Последний раз редактировалось рони, 15.01.2021 в 20:10.
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2021, 16:22
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

voraa,
рони,
А подскажите если у меня есть два блока
<div id="open_img"></div>
и
<div id="open_img2"></div>

Используя этот же код, можно ли вывести изображение при нажатии на
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?1"data-top="100px" data-left="80px"type="button" id="click_red2"></button>
в двух разных блоках? Внутри блока open_img изображение будет в координатах 100px и 80px, внутри блока open_img2 в координатах 50px и 50px.
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2021, 16:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

sssema96,
после клика подождать, картинка в грузится нужно время
<!DOCTYPE html>
<html>
<head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <style type="text/css">
        .green_button_2 {
            background-image: url('img/Green Button.png'); /*фон красной кнопки*/
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        .red_button_2 {
            background-image: url('img/Red Button.png'); /*фон зеленой кнопки */
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        .open_img img{
            position: absolute;
        }

        .open_img {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px red solid;
        }
        .show-image {
            outline: none;
        }
        </style>
<script>
window.addEventListener( "load" , function() {
const buttons = document.querySelectorAll('.show-image'),
      divs = document.querySelectorAll('.open_img');
        buttons.forEach(function(btn){
                const {link, top, left, index} = btn.dataset,
                        div = divs[index],
                        img = new Image;
                        img.src = link;
                btn.addEventListener('click', function(){
                        div.append(img);
                        Object.assign(img.style, {top,left})
                });
        });
    });
</script>
</head>
<body>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?1"
data-top="100px" data-left="80px" data-index="0"
type="button" id="click_red2"></button>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?2"
data-top="50px" data-left="50px" data-index="1"
type="button" id="click_red2"></button>
<div class="open_img"></div>
<div class="open_img"></div>

</body>
</html>

Последний раз редактировалось рони, 20.01.2021 в 16:47.
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2021, 17:30
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
Немного не так. Мне нужно что бы одной кнопкой одновременно выводились два этих изображения в два эти блока.
Ответить с цитированием
  #9 (permalink)  
Старый 20.01.2021, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

sssema96,
создай массив и сделай цикл по массиву
Ответить с цитированием
  #10 (permalink)  
Старый 20.01.2021, 17:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,812

sssema96,
<!DOCTYPE html>
<html>
<head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <style type="text/css">
        .green_button_2 {
            background-image: url('img/Green Button.png'); /*фон красной кнопки*/
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        .red_button_2 {
            background-image: url('img/Red Button.png'); /*фон зеленой кнопки */
            width: 53px; /*размер кнопки по ширине*/
            height: 59px; /*размер кнопки по высоте*/
            cursor: pointer;
        }
        .open_img img{
            position: absolute;
        }
        .open_img {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px red solid;
        }
        .show-image {
            outline: none;
        }
        </style>
<script>
window.addEventListener("load", function() {
    const button = document.querySelector('.show-image'),
        divs = document.querySelectorAll('.open_img'),
        data = [{
                link: "https://picsum.photos/170/120?1",
                top: "100px",
                left: "80px",
                index: 0
            },
            {
                link: "https://picsum.photos/170/120?2",
                top: "50px",
                left: "50px",
                index: 1
            }
        ],
        elems = data.map(({link, top, left,index}) => {
            const div = divs[index], img = new Image;
            img.src = link;
            Object.assign(img.style, {top, left})
            return {div, img}
        })
    button.addEventListener('click', function() {
        elems.forEach(({div, img}) => div.append(img))
    });
});
</script>
</head>
<body>
<button class="show-image red_button_2" type="button"></button>
<div class="open_img"></div>
<div class="open_img"></div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно, чтобы при нажатии кнопки "Играть", игра отображалась в pop-up окне satopol Библиотеки/Тулкиты/Фреймворки 0 28.05.2016 13:15
Получение данных строки грида при нажатии сторонней кнопки Allan Stark ExtJS 4 17.11.2011 17:21
Поменять элемент матрицы при нажатии кнопки в другом фрейме Alexiy Общие вопросы Javascript 1 09.11.2011 09:49
Восстановление hidden field при нажатии кнопки Назад в браузере debugx Элементы интерфейса 1 19.10.2011 18:03
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 12:36