click to add image JavaScript

Question

At the moment I am developing a site where when you click, an image is added to the page.

Is it possible for the code to still work but for it too not effect images further down the page?

I've tried to change so it doesn't link to "img" tag but this doesn't seem to work. First time working with JS so very new to it all.

Js looks like this at the moment

const images = [
"benjones_con4.jpg", 
"ben_jones_ts2.jpg", 
"benjones_con3.jpg"
]

let i = 0 

function placeImage(x, y) {

  const nextImage = images[i]

  const img = document.createElement("img")
  img.setAttribute("src", nextImage)
  img.style.left = x + "px"
  img.style.top = y + "px"

  document.body.appendChild(img)

  i = i + 1

  if (i >=images.length) {
    i = 0
  }
}

document.addEventListener("click", function (event) {

  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

document.addEventListener("touchend", function (event){
  event.preventDefault()
  placeImage(event.pageX, event.pageY)

})

img {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

but for it too not effect images further down the page <-- What does this mean? What "effect" do you mean? — Scott Marcus
– Scott Marcus, Commented Mar 20, 2020 at 18:11
I don't think this is doing what you expect it to img.style.left = x + "px" img.style.top = y + "px" since x and y are your click coordinates, which will be relative to the img container. Unless that container is <body>. — Rob Moll
– Rob Moll, Commented Mar 20, 2020 at 18:21
This is the site at the moment, studioboom.superhi.com I basically don't what the click to add image css affecting the css style for the images down the page. I hope that makes sense? — benjones
– benjones, Commented Mar 20, 2020 at 19:23

Vitaly Yastremsky · Accepted Answer · 2020-03-21 06:17:19Z

1

As I understand from the latest comment, if you don't want that loaded img conflict with other "img" tags on your page, you need add some meaningful class for created img element. And define styles for loaded image separately.

function placeImage(x, y) {
  const nextImage = images[i]
  const img = document.createElement("img")
  // here adding class for created img tag
  img.classList.add('external-loaded-img')
  ...
}

// instead of global img, define for class
.external-loaded-img {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

answered Mar 21, 2020 at 6:17

Vitaly Yastremsky

3863 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

benjones Over a year ago

Thank you, thats fixed it, is there a way that the "click" is only effective in the first 100vh? So that further down the page I am able to have useable links without more images appearing?

Vitaly Yastremsky Over a year ago

Yeah, there are a few ways. But initially you need fix problem with .logo block, it overlap all page because has height: 100vh , and blocks all click within a page. And then you could listen click target and setup if statement to add page, or listen scroll like this if(window.scrollY < window.innerHeight) { console.log(e.target)}

Collectives™ on Stack Overflow

click to add image JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related