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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How te refer to img id from section style

    Hi everyone,

    I am stuck. I have created an element id called "ImageHolder". And now I want to refer to it from a section style point. Let me explain. The following code is in the head part of my code:

    Code:
    <script type="text/javascript">
    
    var pic_array=new Array("image1.png", "image2.png", "image3.png");
    
    var num_pics=3;
    
    var current_pic=0;
    
    var picTimer;
    
    function timePictures()
    
    { picTimer=setTimeout("nextPicture()", 10000); }
    
    function nextPicture()
    
    { current_pic++; if(current_pic>=num_pics) current_pic=0;
    
    document.getElementById("imageHolder").src=pic_array[current_pic]; }
    
    </script>
    In the body part there is the following code:
    <section id="intro" class="intro-resize parallax clearfix" style="background-image: url(placeholders/NEWBLACKHEADER2.png)">

    Now where I am stuck. How do I refer the url….. part to my element id "imageHolder" ??????

    Hope to hear from you all

    Greetz,

    Stefan
    Last edited by VIPStephan; 09-02-2014 at 09:03 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Javascruot no longer requires the constructor new Array and hasn't for years. And javascript arrays are enclosed in square brackets.

    var pic_array=["image1.png", "image2.png", "image3.png"];

    Your imageHolder is just an <img> tag with that id.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,191
    Thanks
    80
    Thanked 4,563 Times in 4,527 Posts
    Try this:
    Code:
    <script type="text/javascript">
    var pic_array = ["image1.png", "image2.png", "image3.png"];
    var current_pic=0;
    var picTimer;
    
    function timePictures()
    { 
        picTimer=setTimeout(nextPicture, 10000); 
    }
    function nextPicture()
    { 
        current_pic = (current_pic + 1) % pic_array.length;
        document.getElementById("info").style.backgroundImage = "url(" + pic_array[current_pic] + ")";
    }
    </script>
    Last edited by Old Pedant; 09-02-2014 at 09:58 PM.
    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.

  • #4
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    And how do I call upon it from:
    <section id="intro" class="intro-resize parallax clearfix" style="background-image: ??????????????>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,191
    Thanks
    80
    Thanked 4,563 Times in 4,527 Posts
    I am totally lost. WHY would you want to try to call if from the style= part of a tag? You can't. Styles can't invoke JavaScript. And even if they could, what would it mean if they could???
    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.

  • #6
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Because that is where my background image is defined. But never mind I found a different solution. Changing the image with a time interval using a GIF
    <section id="intro" class="intro-resize parallax clearfix" style="background-image: url(placeholders/BACKGROUNDIMG/background.gif)">


  •  

    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
    •