Insert a variety of images onto the page at the exact position where the user has

Question

Insert a variety of images onto the page at the exact position where the user has

Looking to create a script that selects a random image from an array and displays it at the current mouse position. Additionally, you can click elsewhere to add a new image, allowing you to cover the entire page with random cat images if desired.

document.onclick = userClicked;
    function userClicked() {
    var x = event.clientX;
    var y = event.clientY;
    var cat = document.getElementById("cat1");
    cat.style.display = '';
    cat.style.position = 'absolute';
    cat.style.left = x - cat.width / 2 + 'px';
    cat.style.top = y - cat.height / 2 + 'px';

}

.image{
  width:100px;
  height:auto;
}
#cat1{
  background-color:red;
  width:100px;
  height:auto;
}

<div class="container">
        <img alt="catAppear" class ="image" id="cat1" style="display: none" src="https://www.coopmcs.com/dotclear/public/chat.png"/>
  <img alt="catAppear" class ="image" id="cat2" style="display:none" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"/>
    </div>
</div>

javascript html jquery css

Answer 1

Answer №1

To dynamically display images on a webpage, you can maintain an array of image sources, randomly select one from the array, and then add a new <img> element with the chosen source to the document.

const srcs = ['https://i.pinimg.com/originals/7a/af/0f/7aaf0f1d48f57b7779c0fbcf103c2d0f.jpg', 'https://www.coopmcs.com/dotclear/public/chat.png'];
document.onclick = userClicked;
function userClicked() {
    var x = event.clientX;
    var y = event.clientY;
    const img = document.createElement('img');
    img.classList.add('image');
    img.src = srcs[Math.floor(Math.random() * srcs.length)];
    img.width = '150';
    img.height = '150';
    img.onload = function(){
      img.style.left = x - img.width / 2 + 'px';
      img.style.top = y - img.height / 2 + 'px';
    }
    document.body.appendChild(img);
}

.image {
  position: absolute;
}

Answer 2

To dynamically display images on a webpage, you can maintain an array of image sources, randomly select one from the array, and then add a new <img> element with the chosen source to the document.

const srcs = ['https://i.pinimg.com/originals/7a/af/0f/7aaf0f1d48f57b7779c0fbcf103c2d0f.jpg', 'https://www.coopmcs.com/dotclear/public/chat.png'];
document.onclick = userClicked;
function userClicked() {
    var x = event.clientX;
    var y = event.clientY;
    const img = document.createElement('img');
    img.classList.add('image');
    img.src = srcs[Math.floor(Math.random() * srcs.length)];
    img.width = '150';
    img.height = '150';
    img.onload = function(){
      img.style.left = x - img.width / 2 + 'px';
      img.style.top = y - img.height / 2 + 'px';
    }
    document.body.appendChild(img);
}

.image {
  position: absolute;
}

Answer 3

Answer №2

var img_cats = ['https://www.coopmcs.com/dotclear/public/chat.png',
'https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg'
        ]

document.onclick = userClicked;

    function userClicked() {
    var x = event.clientX;
    var y = event.clientY;
    var cat = document.getElementById("cats");
    cat.src = img_cats[Math.floor(Math.random() * img_cats.length)];
    cat.style.display = '';
    cat.style.position = 'absolute';
    cat.style.left = x - cat.width / 2 + 'px';
    cat.style.top = y - cat.height / 2 + 'px';

}

.image{
  width:100px;
  height:auto;
}
#cat1{
  background-color:red;
  width:100px;
  height: auto;
}

<div class="container">
        <img alt="catAppear" class="image" id="cats" src="" style="display: none"/>
    </div>
</div>

Answer 4

var img_cats = ['https://www.coopmcs.com/dotclear/public/chat.png',
'https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg'
        ]

document.onclick = userClicked;

    function userClicked() {
    var x = event.clientX;
    var y = event.clientY;
    var cat = document.getElementById("cats");
    cat.src = img_cats[Math.floor(Math.random() * img_cats.length)];
    cat.style.display = '';
    cat.style.position = 'absolute';
    cat.style.left = x - cat.width / 2 + 'px';
    cat.style.top = y - cat.height / 2 + 'px';

}

.image{
  width:100px;
  height:auto;
}
#cat1{
  background-color:red;
  width:100px;
  height: auto;
}

<div class="container">
        <img alt="catAppear" class="image" id="cats" src="" style="display: none"/>
    </div>
</div>

Insert a variety of images onto the page at the exact position where the user has

Answer №1

Answer №2

Similar questions

Looking for assistance with text alignment?

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

Can Rollup be utilized solely for processing CSS files?

Centered Bootstrap 4 modal with responsive width

JavaScript error in the Electron browser is causing a glitch

Removing a key from an index signature in Typescript - a step-by-step guide

Can I use npm's jQuery in an old-school HTML format?

Communication between Laravel and controller using AJAX for exchanging information

Searching on Google for the Twitter Bootstrap documentation using the Google search

Firefox with Ajax bug bar

Show items in the sequence of clicking

Storing user input in an array with the use of JavaScript

experimenting with adding fresh choices to dropdown menu using ajax and jquery

Retrieving HTML content from an AJAX request

I just stumbled upon Jupyter and I'm curious - can I utilize Javascript and store it in the cloud?

Switch between various div elements

Animating meshes in Three.js with texture mapping

Obtaining the login status of users on my website and displaying the number of users along with their names from the database using PHP

Ways to completely eliminate a global component in VueJS

Get rid of the dashed outline surrounding the selected button