Change image when page reload (refresh) in JavaScript

ddoser2
 
on Nov 07, 2021 11:10 PM
495 Views

Hello, I'm little bit curios if this even possible, but if it's I would appreciate if someone could help with it.

What I'm trying is to make on html page change background, header and footer background by list who is going by row. For example: when on page is background1.png, there is header1.png and footer-bg1.png too.

I have found similar javascripts, but they change those images by random, not by row (example: background2png, header1.png and footer-bg3.png)

html: 

<div class="about show-for-medium-up"section class="about" id="about"> </div>
<div class="about__solders show-for-medium-up"" id="about__solders"></div>
<div class="footer-bg show-for-medium-up" section class="footer-bg" id="footer-bg"> </div>

css:

.about__solders {
    max-width: 1206px;
    min-height: 479px;
    width: 100%;
    height: 100%;
    background: url(img/header1.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    left: 52%;
    bottom: -206px;
    transform: translate(-49%, 0);
}

.about {
    padding: 4.12rem 6.25rem;
    background: url(bg1.png);
    background-size: contain, auto, auto, cover;
    background-position: top center, left center, right center, center center;
    background-repeat: no-repeat;
    background-color: #000;
    overflow: hidden;
}

.footer-bg {
    padding: 68px 0px;
    background: url(img/main-page-eff-bottom.png), url(img/footer-bg.jpg);
    background-size: auto, cover;
    background-position: center bottom, center;
    background-repeat: no-repeat, no-repeat;
}

javascript

<script>
    function randomImage() {
        var images = [
            './img/header1.png',
            './img/header2.png',
            './img/header3.png'];
        var size = images.length;
        var x = Math.floor(size * Math.random());
        console.log(x);
        var element = document.getElementsByClassName('about__solders');
        console.log(element);
        element[0].style["background-image"] = "url(" + images[x] + ")";
    }

    document.addEventListener("DOMContentLoaded", randomImage);
</script>
<script>
    function randomImage() {
        var images = [
            './img/bg1.png',
            './img/bg2.png',
            './img/bg3.png'];
        var size = images.length;
        var x = Math.floor(size * Math.random());
        console.log(x);
        var element = document.getElementsByClassName('about');
        console.log(element);
        element[0].style["background-image"] = "url(" + images[x] + ")";
    }

    document.addEventListener("DOMContentLoaded", randomImage);
</script>
<script>
    function randomImage() {
        var images = [
            './img/footer-bg1.png',
            './img/footer-bg2.png',
            './img/footer-bg3.png'];
        var size = images.length;
        var x = Math.floor(size * Math.random());
        console.log(x);
        var element = document.getElementsByClassName('footer-bg');
        console.log(element);
        element[0].style["background-image"] = "url(" + images[x] + ")";
    }

    document.addEventListener("DOMContentLoaded", randomImage);
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Nov 08, 2021 05:57 AM

Hi ddoser2, 

 Can you please explain in detail what exactly you want to do & which problem you are facing?

dharmendr
 
on Nov 08, 2021 08:00 AM

Hi ddoser2,

Refer below code.

HTML

<script type="text/javascript">
    window.onload = function () {
        var images = ['Images/01.jpg', 'Images/02.jpg', 'Images/03.jpg', 'Images/04.jpg', 'Images/05.jpg', 'Images/06.jpg', 'Images/07.jpg'];
        var i = "";
        if (localStorage['Index'] != undefined) {
            i = localStorage['Index'];
        } else {
            i = 0;
        }
        if (i == images.length) {
            i = 0;
        }
        var image = images[i];
        document.getElementById('about').style.backgroundImage = "url('" + image + "')";
        document.getElementById('about').style.backgroundRepeat = "no-repeat";
        document.getElementById('about').style.backgroundSize = "cover";

        document.getElementById('about__solders').style.backgroundImage = "url('" + image + "')";
        document.getElementById('about__solders').style.backgroundRepeat = "no-repeat";
        document.getElementById('about__solders').style.backgroundSize = "cover";

        document.getElementById('footer-bg').style.backgroundImage = "url('" + image + "')";
        document.getElementById('footer-bg').style.backgroundRepeat = "no-repeat";
        document.getElementById('footer-bg').style.backgroundSize = "cover";
        i++;

        localStorage['Index'] = i;
    }
</script>
<div id="about" style="height: 100px">Header</div>
<div id="about__solders" style="height: 400px">Body</div>
<div id="footer-bg" style="height: 100px">Footer</div>

 

ddoser2
 
on Nov 09, 2021 02:09 AM
dharmendr says:

Hi ddoser2,

Refer below code.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
    window.onload = function () {
        var images = ['Images/01.jpg', 'Images/02.jpg', 'Images/03.jpg', 'Images/04.jpg', 'Images/05.jpg', 'Images/06.jpg', 'Images/07.jpg'];
        var i = "";
        if (localStorage['Index'] != undefined) {
            i = localStorage['Index'];
        } else {
            i = 0;
        }
        if (i == images.length) {
            i = 0;
        }
        var image = images[i];
        document.getElementById('about').style.backgroundImage = "url('" + image + "')";
        document.getElementById('about').style.backgroundRepeat = "no-repeat";
        document.getElementById('about').style.backgroundSize = "cover";
 
        document.getElementById('about__solders').style.backgroundImage = "url('" + image + "')";
        document.getElementById('about__solders').style.backgroundRepeat = "no-repeat";
        document.getElementById('about__solders').style.backgroundSize = "cover";
 
        document.getElementById('footer-bg').style.backgroundImage = "url('" + image + "')";
        document.getElementById('footer-bg').style.backgroundRepeat = "no-repeat";
        document.getElementById('footer-bg').style.backgroundSize = "cover";
        i++;
 
        localStorage['Index'] = i;
    }
</script>
<div id="about" style="height: 100px">Header</div>
<div id="about__solders" style="height: 400px">Body</div>
<div id="footer-bg" style="height: 100px">Footer</div>

 

 

Hi @dharmendr 

Thanks, I appreciate your help, but it's not what I wanted to make happen on page. With this javascript you gave to me it's changes all div to the same one photo when reload.

What I want is... I have 3 photos for each "div"

For example for "div" ".about" I have bg1.png, bg2.png, bg3.png,

for ".about-solders" I have header1.png, header2.png, header3.png

and for ".footer-bg" I have footer-bg1.png, footer-bg2.png, footer-bg2.png

The idea what I want, is to make, when page is reloaded or opened those three "div" have their photo with same number like page is reloaded and It's have shows bg1.png, header1.png and footer-bg1.png, on next time when page is realoded or opened, for example it's has bg3.png, header3.png, footer-bg3.png

I'm not sure if it's even possible, but thanks.

Also sorry for my grammar.

ddoser2
 
on Nov 09, 2021 02:33 AM
on Nov 09, 2021 02:35 AM
arjunv says:

Hi ddoser2, 

 Can you please explain in detail what exactly you want to do & which problem you are facing?

 Hi @arjunv

Im gonna try to explain this whole idea about what I want to javascript do ...

 I wanted to make a page with 3 different designs, and those designs would show randomly when page is reloaded or opened. For each design I have 3 images, what is meant for each those div's. The problem is this javascript upload images for each div in random (like it's upload bg1.png, header3png and footer-bg2.png on page). but the idea is to javascript should make upload the image for each div in a row (like page is opened or reloaded and javascript randomly uploads one row bg1.png, header1.png and footer-bg1.png, next time the random row is again uploaded and it's bg3.png, header3.png & footer-bg3.png)

Thanks.

Also sorry for my grammar

dharmendr
 
on Nov 09, 2021 06:10 AM

Please verify the sample provided. You need to modify the image url for each div. I have given only an example with same images for all div but the code will display the images row wise instead randomly.