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. #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,583
    Thanks
    3
    Thanked 516 Times in 503 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. #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
  •