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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Getting a background color of a button to change when my image slider changes.

    So I now have another question for anyone that can help. My image slider works great, big thanks to Sunfighter for the assistance. I have changed my div's over to now use buttons for rotating the images as well as to show how many images I have loaded in my array. What I want to do now is when the image changes to highlight or change the background-color of the appropriate button at the top of my slider. I have it so when I click on each one it will change but I would like to have it do so dynamically as well when the slider is rotating through all of the images. Here is a link to the site Design Team Demo Site to view what I have so far.
    Here is my code:
    HTML
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="Image_Slider.js"></script>
    <link rel="stylesheet" type="text/css" href=".\Images\e0009492\500x366slidestyle.css">
    </head>
    <body>
        <!-- Load the first image to the img tag. The rest of the images will need to be loaded into the Image_Slider.js file.  -->
        <div class="container">
            <div id="images">
                <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
            </div> <!-- End of 'images' DIV -->
            <div id="Prev">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png"/></button>
                </form>
            </div> <!-- End of 'Prev' DIV -->
            <div id="Next">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\next.png"/></button>
                </form>
            </div> <!-- End of 'Next' DIV --> 
            <div id="pager">
                <form>
                    <button id='btnPage1' onclick="javascript:callImageArray(0)" type="button"></button>
                    <button id='btnPage2' onclick="javascript:callImageArray(1)" type="button"></button>
                    <button id='btnPage3' onclick="javascript:callImageArray(2)" type="button"></button>
                    <button id='btnPage4' onclick="javascript:callImageArray(3)" type="button"></button>
                    <button id='btnPage5' onclick="javascript:callImageArray(4)" type="button"></button>
                </form>
            </div> <!-- End of 'pager DIV --> 
            <div id="PlayPause">
                <form>
                    <button type="button" onclick="play()"><img src=".\Images\e0009492\play.png"/></button>
                    <button type="button" onclick="clearTimeout(timerID)""><img src=".\Images\e0009492\pause.png"/></button>
                </form>
            </div>
        </div> <!-- End of container div -->
    </body>
    </html>
    Javascript Code:
    Code:
        //Customize settings for images and file location as well as speed of Image slider.
        //Adjust for Directory and speed of the slider. 
        var imageDir = "/Images/e0009492/"; //Change for image location.
        var interval = 1500; //Adjust for auto slide; 1000 = 1 second. 
        
        //Change to the correct Image files within the doublequotes. 
        var imageArray = [
            imageDir + "01.jpg",
            imageDir + "02.jpg",
            imageDir + "03.jpg",
            imageDir + "04.jpg",
            imageDir + "05.jpg"
        ];
        
        //Do not adjust below settings.  
        var random_display = 0;
        var imageNum = -1;
        var place;
        
        function imageItem(url) {
            this.img = new Image();
            this.img.src = url;
            this.url = url;
        }
        
        function randNum(x, y) {
            var range = y - x + 1;
            return Math.floor(Math.random() * range) + x;
        }
        
        function getNextImage() {
            imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
            return imageArray[imageNum];
        }
        
        function getPrevImage() {
            imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
            return imageArray[imageNum];
        }
        
        function prevImage() {
            var image_item = getPrevImage();
            document.getElementById('slideImg').src = image_item;
            
        }
        
        function nextImage() {
            var image_item = getNextImage();
            document.getElementById('slideImg').src = image_item;
            
        }
        
        function play() {
            nextImage();
            timerID = setTimeout(play, interval);
            
        }
        
        //load the javascript code upon load of the html page.
        window.onload = function(){
            place = document['slideImg'];
            play();
            
        };
    
    //get the total number of items in the array to be displayed in the slider.
       /* function PagerButton() {
            var text =  "<form>";
            for (i = 0; i < imageArray.length; ++i){
                text += "<button type='button' onclick='javascript:callImageArray("+i+")'>" + "</button>";
            }
            text += "</form>";
            document.getElementById("pager").innerHTML = text;
            
        }*/
        function HighlightMove(){
            for (i = 0; i < imageArray.length; ++i){
                Highlight(callImageArray(i));
               
            }
            
            
        }
        function callImageArray(imgNum) {
            switch (imgNum) {
                case 0:
                    imageNum = 0;
                    document.getElementById('slideImg').src = imageArray[0];
                    Highlight(0);
                    break;
                case 1:
                    imageNum = 1;
                    document.getElementById('slideImg').src = imageArray[1];
                    Highlight(1);
                    break;
                case 2:
                    imageNum = 2;
                    document.getElementById('slideImg').src = imageArray[2];
                    Highlight(2);
                    break;
                case 3:
                    imageNum = 3;
                    document.getElementById('slideImg').src = imageArray[3];
                    Highlight(3);
                    break;
                case 4:
                    imageNum = 4;
                    document.getElementById('slideImg').src = imageArray[4];
                    Highlight(4);
                    break;
            }
        }
        
        //Highlight each button in red for each individual image. 
        function Highlight(imgNum){
           switch (imgNum) {
                //case
                case 0:
                    imgNum = 0;
                    document.getElementById('btnPage1').style.backgroundColor = 'Red';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 1:
                    imgNum = 1;
                    document.getElementById('btnPage2').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 2:
                    imgNum = 2;
                    document.getElementById('btnPage3').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 3:
                    imgNum = 3;
                    document.getElementById('btnPage4').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 4:
                    imgNum = 4;
                    document.getElementById('btnPage5').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    break;
           }
        }
    CSS Code:
    Code:
    .container
        {
            position: absolute;
            width: 550px;
            height: 366px;
            z-index: 1;
        }
    #Prev button
        {
            
            position: relative;
            margin-top: 170px;
            margin-left: -550px;
            display: inline;
            float: left;
            opacity: .5;
            z-index: 3;        
        }
    #Prev button:hover
        {
            opacity: 1.0;
        }
        
    #images
        {
            /*border: 1px solid black;*/
            position: relative;
            display: inline;
            float: left;
            overflow: hidden;
            z-index: 1;
        }
       
    #Next button
        {
            position: relative;
            margin-top: -183px;
            opacity: .5;
            display: inline;
            float: right;
            z-index: 3;
        }
    
    #Next button:hover
        {
            opacity: 1.0;
        }
    #pager{
    	
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
            margin-top: -366px;
    	margin-right: 225px;
            float: right;
            z-index: 5;
    }
    
    #pager button{
    	margin:5px;
    	width:20px;
    	height:20px;
    	opacity: 0.5;
    	float:left;
    	border-radius: 15px;
    	cursor: pointer;
    }
    
    #pager button:hover
        {
    	opacity:0.9;
        }
    
    /*#pager button:active
        {
            background-color: red;
        }*/
    
    #PlayPause form
        {
            position: relative;
            display: inline;
            margin-left: 200px;
            margin-top: -30px;
            float: left;
            z-index: 5;
        }
    
    #PlayPause button
        {
            opacity: .75;
        }
    #PlayPause button:hover
        {
            opacity: 1.0;
        }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .container
        {
            position: absolute;
            width: 550px;
            height: 366px;
            z-index: 1;
        }
    #Prev button
        {
    
            position: relative;
            margin-top: 170px;
            margin-left: -550px;
            display: inline;
            float: left;
            opacity: .5;
            z-index: 3;
        }
    #Prev button:hover
        {
            opacity: 1.0;
        }
    
    #images
        {
            /*border: 1px solid black;*/
            position: relative;
            display: inline;
            float: left;
            overflow: hidden;
            z-index: 1;
        }
    
    #Next button
        {
            position: relative;
            margin-top: -183px;
            opacity: .5;
            display: inline;
            float: right;
            z-index: 3;
        }
    
    #Next button:hover
        {
            opacity: 1.0;
        }
    #pager{
    
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
            margin-top: -366px;
    	margin-right: 225px;
            float: right;
            z-index: 5;
    }
    
    #pager button{
    	margin:5px;
    	width:20px;
    	height:20px;
    	opacity: 0.5;
    	float:left;
    	border-radius: 15px;
    	cursor: pointer;
    }
    
    #pager button:hover
        {
    	opacity:0.9;
        }
    
    /*#pager button:active
        {
            background-color: red;
        }*/
    
    #PlayPause form
        {
            position: relative;
            display: inline;
            margin-left: 200px;
            margin-top: -30px;
            float: left;
            z-index: 5;
        }
    
    #PlayPause button
        {
            opacity: .75;
        }
    #PlayPause button:hover
        {
            opacity: 1.0;
        }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
        //Customize settings for images and file location as well as speed of Image slider.
        //Adjust for Directory and speed of the slider.
        var imageDir = "http://www.aghost.net/Images/e0009492/"; //Change for image location.
        var interval = 1500; //Adjust for auto slide; 1000 = 1 second.
        //Change to the correct Image files within the doublequotes.
        var imageArray = [
            imageDir + "01.jpg",
            imageDir + "02.jpg",
            imageDir + "03.jpg",
            imageDir + "04.jpg",
            imageDir + "05.jpg"
        ];
    
        //Do not adjust below settings.
        var random_display = 0;
        var imageNum = -1;
        var place;
        var timerID;
    
        function imageItem(url) {
            this.img = new Image();
            this.img.src = url;
            this.url = url;
        }
    
        function randNum(x, y) {
            var range = y - x + 1;
            return Math.floor(Math.random() * range) + x;
        }
    
        function getNextImage() {
            return (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
        }
    
        function getPrevImage() {
            return (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
        }
    
        function prevImage() {
          callImageArray(getPrevImage());
    
        }
    
        function nextImage() {
         callImageArray(getNextImage());
    
        }
    
        function play() {
         callImageArray(getNextImage(),true);
        }
    
        //load the javascript code upon load of the html page.
        window.onload = function(){
            place = document['slideImg'];
            play();
    
        };
    
    //get the total number of items in the array to be displayed in the slider.
       /* function PagerButton() {
            var text =  "<form>";
            for (i = 0; i < imageArray.length; ++i){
                text += "<button type='button' onclick='javascript:callImageArray("+i+")'>" + "</button>";
            }
            text += "</form>";
            document.getElementById("pager").innerHTML = text;
    
        }*/
        function callImageArray(n,a){
          clearTimeout(timerID)
          var ips=document.getElementById('pager').getElementsByTagName('button');
          ips[imageNum]?ips[imageNum].style.backgroundColor = 'white':null;
          if (imageArray[n]){
           imageNum = n;
           document.getElementById('slideImg').src = imageArray[n];
           ips[n]?ips[n].style.backgroundColor = 'red':null;
          }
          a===true?timerID = setTimeout(play, interval):null;
         }
    
    /*]]>*/
    </script></head>
    
    <body>
        <!-- Load the first image to the img tag. The rest of the images will need to be loaded into the Image_Slider.js file.  -->
        <div class="container">
            <div id="images">
                <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
            </div> <!-- End of 'images' DIV -->
            <div id="Prev">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png"/></button>
                </form>
            </div> <!-- End of 'Prev' DIV -->
            <div id="Next">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\next.png"/></button>
                </form>
            </div> <!-- End of 'Next' DIV -->
            <div id="pager">
                <form>
                    <button id='btnPage1' onclick="javascript:callImageArray(0)" type="button"></button>
                    <button id='btnPage2' onclick="javascript:callImageArray(1)" type="button"></button>
                    <button id='btnPage3' onclick="javascript:callImageArray(2)" type="button"></button>
                    <button id='btnPage4' onclick="javascript:callImageArray(3)" type="button"></button>
                    <button id='btnPage5' onclick="javascript:callImageArray(4)" type="button"></button>
                </form>
            </div> <!-- End of 'pager DIV -->
            <div id="PlayPause">
                <form>
                    <button type="button" onclick="play()"><img src=".\Images\e0009492\play.png"/></button>       <button type="button" onclick="clearTimeout(timerID)"><img src=".\Images\e0009492\pause.png"/></button   </form>
            </div>
        </div> <!-- End of container div -->
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey vwphillips, I tried the modifications, you posted above, but I do not believe it is what I am looking for specifically. when I try it with my code as a separate function from my callImageArray() function. Then Called that function within my HTML code, but when I run it all it does is highlight all of the circle buttons when I select them instead of causing the others to go back to white like my original code does with the Switch/Case. What I would like to add to my functionality is when my images change to the next to have the circle buttons highlight then change when the image changes.


  •  

    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
    •