Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Changing Image Background

    I have the next code

    <script type = "text/javascript">

    var backImage = new Array();
    backImage[0] = "images/bkg1.png";
    backImage[1] = "images/bkg2.png";
    backImage[2] = "images/bkg3.png";
    backImage[3] = "images/bkg4.png";
    backImage[4] = "images/bkg5.png";
    backImage[5] = "images/bkg6.png";
    backImage[6] = "images/bkg7.png";
    backImage[7] = "images/bkg8.png";
    var i = Math.floor(7*Math.random())

    function getBackImage() {
    return backImage[Math.floor(Math.random() * messages.length)];
    }

    $(document).ready(function(){
    var validator = $(".contactform").validate({
    success: function(label) {
    label.addClass("valid").text(backImage_success[i])
    label.addClass("valid").text(getBackImage(i));
    }
    }); //end form validate code
    });


    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }
    </script>
    <body onload = "changeBGImage(i)">


    <a href="javascript:changeBGImage(i++) "><img src="images/flecha.png"/></a>

    which works great, but I need to stop the i++ of the button to stop when reaching to 7 and go back to 0. Can someone help me do this?

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    You would need to add this bit of code at the beginning of the changeBGImage function:

    Code:
    if (i > 7) {
       i = 0;
    }
    so your changeBGImage function would look like this:

    Code:
    function changeBGImage(whichImage){
       if (i > 7) {
          i = 0;
       }
       if (document.body){
          document.body.background = backImage[whichImage];
       }
    }
    In addition, I would adjust your code further to make more easily scalable (if you add more or take away background images):

    Code:
    var backImage = new Array();
    backImage[0] = "images/bkg1.png";
    backImage[1] = "images/bkg2.png";
    backImage[2] = "images/bkg3.png";
    backImage[3] = "images/bkg4.png";
    backImage[4] = "images/bkg5.png";
    backImage[5] = "images/bkg6.png";
    backImage[6] = "images/bkg7.png";
    backImage[7] = "images/bkg8.png";
    var numImage = backImage.length;  //in this case it will return the number "8"
    var i = Math.floor((numImage-1)*Math.random())
    
    function getBackImage() {
    return backImage[Math.floor(Math.random() * messages.length)];
    }
    
    $(document).ready(function(){
    var validator = $(".contactform").validate({
    success: function(label) {
    label.addClass("valid").text(backImage_success[i])
    label.addClass("valid").text(getBackImage(i));
    }
    }); //end form validate code
    });
    
    
    function changeBGImage(whichImage){
     if (i >= numImage) {
          i = 0;
       }
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }
    I just added a new variable called numImages, which contains the number of elements in the backImage array.

    Then in the variable i, I used (numImages-1) in place of your hardcoded "7".

    Finally, in the changeBGImage, I replaced "7" with numImage in the conditional that sets the number back to 0.


    That way, you won't have to worry about changing the numbers in your script to match the amount of images in your array. It will be done for you!
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thankyou

    Thanks for the code

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,494 Times in 4,458 Posts
    This code is wrong:
    Code:
    var numImage = backImage.length;  //in this case it will return the number "8"
    var i = Math.floor((numImage-1)*Math.random())
    That code will *NEVER* pick the last image in the array.

    It should be simply
    Code:
    var i = Math.floor(numImage*Math.random());
    And then this code makes no sense:
    Code:
    label.addClass("valid").text(getBackImage(i));
    because the function getBackImage( ) does *NOT* accept an argument. That is, the i in there is USELESS, and getBackImage() will pull a random image that may or may not match the value of i.

    On top of that, getBackImage() bases its random choice on the length of something called messages, but that variable is never defined in the code.

    In short, this looks like it needs to be rewritten from the start.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keep working on the same code

    Hi I´m still trying to work on the same code. I need to style my code. So if I would do it on php, I would use the next code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>images</title>
    <style type="text/css">
    #bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    }
    #bg img {
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    }
    #flecha {
    position: absolute;
    z-index: 100;
    width:3px;
    height:3px;
    }
    </style>


    </head>

    <body>
    <div id="bg"><img src="images/<?php
    $pics = array('bkg1.png', 'bkg2.png', 'bkg3.png', 'bkg4.png','bkg5.png', 'bkg6.png', 'bkg7.png', 'bkg8.png');
    echo $pics[array_rand($pics)];
    ?>"/></div>
    <div id="flecha"><a href onclick="<?php echo $pics(++) ?>"><img src="images/flecha.png" width="120" height="121"/></a></</div>
    </body>
    </html>

    and the style works perfectly here, but with php I don't know how to call to change the background image of the array with a button.

    So I did this with some of your help:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>images</title>
    <style type="text/css">

    #bg {
    z-index: 70;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    }
    /*changeBGImage(i) {
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    }*/
    #flecha {
    position: absolute;
    z-index: 100;
    width:1px;
    height:1px;
    }

    </style>
    <script type = "text/javascript">
    var backImage = new Array();
    backImage[0] = "images/bkg1.png";
    backImage[1] = "images/bkg2.png";
    backImage[2] = "images/bkg3.png";
    backImage[3] = "images/bkg4.png";
    backImage[4] = "images/bkg5.png";
    backImage[5] = "images/bkg6.png";
    backImage[6] = "images/bkg7.png";
    backImage[7] = "images/bkg8.png";
    var numImage = backImage.length; //in this case it will return the number "8"
    var i = Math.floor((numImage-1)*Math.random())
    /*var i = Math.floor(numImage*Math.random());*/

    function getBackImage() {
    return backImage[Math.floor(Math.random() * messages.length)];
    }

    $(document).ready(function(){
    var validator = $(".contactform").validate({
    success: function(label) {
    label.addClass("valid").text(backImage_success[i])
    label.addClass("valid").text(getBackImage(i));
    }
    }); //end form validate code
    });


    function changeBGImage(whichImage){
    if (i >= numImage) {
    i = 0;
    }
    if (document.body){
    document.body.background = backImage[whichImage];
    document.backImage.style.position = "absolute";
    backImage.style.zIndex = "90";
    backImage.style.top = "0";
    backImage.style.left = "0";
    backImage.style.right = "0";
    backImage.style.bottom = "0";
    backImage.style.bottom = "0";
    backImage.style.margin = "auto";
    backImage.style.minWidth = "50%";
    backImage.style.minHeight = "50%";
    }
    }
    </script>
    <body id="bg" onload="changeBGImage(i)">
    <div id="flecha"> <a href onclick="javascript:changeBGImage(i++) "><img src="images/flecha.png" width="120" height="121"/></a></div></body>

    but in this version the style doesn't work as it worked on my first code. Can anyone help me?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •