Getting random image to work

HTML & CSS
1

Is this something difficult to do? @Paul_Wilkins

I’m seeing a whole bunch of different types of javascript codes for this.

Here are 3 images.

https://i.imgur.com/oAfqb2E.png
https://i.imgur.com/gaijZc5.png
https://i.imgur.com/3v4t6X1.png

(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    wrapper.classList.remove("inactive");
    wrapper.classList.add("active");
    hide(wrapper.querySelector(".playcover"));
    hide(wrapper.querySelector(".cover"));
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wraph");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wraph");
}());
2

Would I use something different from this, or is this good?

I did this:

 <img id="image" />

var images = [
  "https://i.imgur.com/oAfqb2E.png",
  "https://i.imgur.com/gaijZc5.png",
  "https://i.imgur.com/3v4t6X1.png"
];

function randImg() {
  var size = images.length
  var x = Math.floor(size * Math.random())
  document.getElementById('image').src = images[x];
}

randImg();
3

If the above code is good, how would I add it to the code?
@PaulOB

I can’t quite get it to work properly in the code.

It’s a different kind of background image so it works differently from a regular image code.

The CSS part would need to be configured properly for this to work.

4

Exactly, the JS you posted above in post#2 is targeting the image source attribute for an html image.

You are wanting a CSS background image so you need to adjust your JS to target the .backgroundImage instead of .src

document.getElementById('image').style.backgroundImage = 'url(' + images[x] + ')';

Now that will work in this simple test case shown below but the background position is being set on your .wraph.active styles in the first fiddle you posted, that will need to be taken into account.

But for the sake of testing I just moved the bg position up 1/2 way with -303px to show how it would work.

Run this page, then reload and you will get random backgrounds. It is possible to get the same BG image 2-3 times in a row though from what I see. Keep hitting reload and it will change.

Note that I have changed <img id="image" /> to <div id="image"></div>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
#image {
  position: relative;
  width: 606px;
  height: 606px;
  background-position: 0px -303px; /* test bg position*/
  /*bg position would go on your .wraph.active styles as seen in other demo*/
}
</style>

</head>
<body>

<div id="image"></div>

<script>

var images = [
  "https://i.imgur.com/oAfqb2E.png",
  "https://i.imgur.com/gaijZc5.png",
  "https://i.imgur.com/3v4t6X1.png"
];

function randImg() {
  var size = images.length
  var x = Math.floor(size * Math.random())
  document.getElementById('image').style.backgroundImage = 'url(' + images[x] + ')';
}

randImg();
</script>

</body>
</html>
3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.