Вывод изображение по координатам при нажатии кнопки
Здравствуйте. Есть 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);
});
});
};
|
sssema96,
<button class="show-image red_button_2" data-link="img/red led.png" data--top="" data-left="" type="button" id="click_red2"></button> Цитата:
читать про dataset |
рони,
Прочитал про 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 работать. |
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);
});
});
};
|
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>
|
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. |
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>
|
рони,
Немного не так. Мне нужно что бы одной кнопкой одновременно выводились два этих изображения в два эти блока. |
sssema96,
создай массив и сделай цикл по массиву |
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>
|
| Часовой пояс GMT +3, время: 14:53. |