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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Gallery Current Page Color

    So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction.

    I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons.

    I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value.

    Code:
    <script type="text/javascript">
    var imgList = [
    "../Assets/Images_Revised/40_kitchen.jpg",
    "../Assets/Images_Revised/40_stair.jpg",
    "../Assets/Images_Revised/C_front2.jpg",
    "../Assets/Images_Revised/C_rear_side_combo.jpg",
    "../Assets/Images_Revised/C_side.jpg",
    "../Assets/Images_Revised/Y_combo.jpg",
    "../Assets/Images_Revised/Y_window.jpg"
    ];
    
    var clientData = [
    "This is a place holder for the first set of text.", // index 1
    "This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 
         "This is a place holder for the third set of text.",
         "This is a place holder for the fourth set of text.",
      "This is a place holder for the fifth set of text.",
     "This is a place holder for the sixth set of text.",
     "This is a place holder for the first seventh of text.",
    ];
    
    
    var currentMain = 0;
    var currentMainT = 0;
    
    function Prev() 
    {
        return ShowMain(currentMain-1);
    				return ShowMainT(currentMainT-1);
    }
    function Next() 
    {
        return ShowMain(currentMain+1);
    			 return ShowMainT(currentMainT+1);
    }
    
    
    function ShowMain(which)
    {
        currentMain = which;
    				currentMainT = which;
        if ( currentMain < 0 ) currentMain = 0;
    				if ( currentMainT < 0 ) currentMainT = 0;
        	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
    					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; 
        					document.getElementById('mainImg').src = imgList[currentMain];
    					    document.getElementById('mainText').innerHTML = clientData[currentMainT];
       						 var PD = document.getElementById('Pg');
    										var PD2 = document.getElementById('Pg2');
       		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
    				  if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
    						document.getElementById("mainText").style.display = 'inline'
    						document.getElementById("gallery").style.color="#ff0000";
    						
        return false;
    }
    
    onload = function() { ShowMain(0); }
    onload = function() { ShowMainT(0); }
    </script>
    <script language="JavaScript">
    
    
    
    function preloader() 
    
    {
    
    
         // counter
         var i = 0;
    
    
         // create object
         imageObj = new Image();
    
    
         // set image list
         images = new Array();
         images[0]="../Assets/Images/pt_entry+hall2.jpg"
         images[1]="../Assets/Images/pt_stair+hall.jpg"
         images[2]="../Assets/Images_Revised/40_kitchen.jpg"
         images[3]="../Assets/Images_Revised/40_stair.jpg"
    				 images[4]="../Assets/Images_Revised/C_front2.jpg"
    				 images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
         images[7]="../Assets/Images_Revised/C_side.jpg"
         images[8]="../Assets/Images_Revised/Y_combo.jpg"
         images[9]="../Assets/Images_Revised/Y_window.jpg"
    				 images[10]="../Assets/Images_Revised/V_stair.jpgg"
    
    
         // start preloading
         for(i=0; i<=3; i++) 
         {
              imageObj.src=images[i];
         }
    
    
    
    } 
    
    
    
    </script>
    Code:
    <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
          </td>
        <td id="cell5 images">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
    ><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
    ><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
    ><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
    ><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
    ><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
    ><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
    ><a href="#" onclick="return Prev();" class="gallery"><</a
    ><a href="#" class="gallery" onclick="return Next();">></a></div>
    Last edited by rettgoings; 07-20-2010 at 03:21 PM.

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Im lost nevermind.
    Last edited by rettgoings; 07-20-2010 at 06:31 PM.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You can access all anchor elements (<a>) in the gallery by using something like this:

    Code:
    var all_links=document.getElementById('gallery').getElementsByTagName('a');
    which will end up assigning the variable "all_links" as an array of all anchor tags within the specified scope (which is the element with the id of "gallery" - so you won't get interference from other links in the page).

    Here is an example you can play with to get the idea:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test Page</title>
    <script type="text/javascript">
    var current_position=0;
    var all_links="";
    function init(){
    	all_links=document.getElementById('gallery').getElementsByTagName('a');
    	all_links[0].style.color="#f00";
    }
    function color_me(element,color){
    	element.style.color=color;
    }
    function ShowMain(input){
    }
    function next(){
    	color_me(all_links[current_position],'#00f');
    	if((current_position+1)<all_links.length){
    		current_position++;
    	}
    	else{
    		current_position=0;
    	}
    	color_me(all_links[current_position],'#f00');
    }
    </script>
    </head>
    <body onload="setTimeout('init()',50);">
    
    <input type="button" onclick="next()" value="Highlight Next Link" />
    <div id="gallery">
    <a href="#" onclick="return ShowMain(0); return ShowMainT(1); setColor()">1</a
    ><br />
    <a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
    ><br /><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
    ><br /><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
    ><br /><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
    ><br /><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
    ><br /><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a>
    </div>
    </body>
    </html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    rettgoings (07-21-2010)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,005
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    NO NO NO!!!!

    THIS IS A KILLER:
    Code:
    <a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a>
    The keyword return means "RETURN RIGHT NOW! Do not excecute *ANY* code after this point!"

    So that code has *exactly* the same effect as doing:
    Code:
    <a href="#" onclick="return ShowMain(1);">2</a>
    STOP USING return until/unless you need it!

    Thus:
    Code:
    <a href="#" onclick="ShowMain(1); ShowMainT(1); setColor(); return false;">2</a>
    Only *after* you have done all the work you need do you do the "return false" to ensure that the <a> doesn't actually perform the HREF action.
    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.

  • Users who have thanked Old Pedant for this post:

    rettgoings (07-21-2010)

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks for the example. Rowsdower!, can you tell me why my next button is not working? Also will this also work if I select a individual <a> from the gallery?

    Code:
    <script type="text/javascript">
    var imgList = [
    "../Assets/Images_Revised/40_kitchen.jpg",
    "../Assets/Images_Revised/40_stair.jpg",
    "../Assets/Images_Revised/C_front2.jpg",
    "../Assets/Images_Revised/C_rear_side_combo.jpg",
    "../Assets/Images_Revised/C_side.jpg",
    "../Assets/Images_Revised/Y_combo.jpg",
    "../Assets/Images_Revised/Y_window.jpg"
    ];
    
    var clientData = [
    "This is a place holder for the first set of text.", // index 1
    "This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 
         "This is a place holder for the third set of text.",
         "This is a place holder for the fourth set of text.",
      "This is a place holder for the fifth set of text.",
     "This is a place holder for the sixth set of text.",
     "This is a place holder for the first seventh of text.",
    ];
    
    
    var currentMain = 0;
    var currentMainT = 0;
    var current_position=0;
    var all_links="";
    
    function init(){
    	all_links=document.getElementById('gallery').getElementsByTagName('a');
    	all_links[0].style.color="#f00";
    }
    
    function color_me(element,color){
    	element.style.color=color;
    }
    
    function Prev() 
    {
        return ShowMain(currentMain-1);
    				return ShowMainT(currentMainT-1);
    }
    function Next() 
    {
        return ShowMain(currentMain+1);
    			 return ShowMainT(currentMainT+1);
    				color_me(all_links[current_position],'#00f');
    	if((current_position+1)<all_links.length){
    		current_position++;
    	}
    	else{
    		current_position=0;
    	}
    	color_me(all_links[current_position],'#f00');
    
    }
    
    
    function ShowMain(which)
    {
        currentMain = which;
    				currentMainT = which;
        if ( currentMain < 0 ) currentMain = 0;
    				if ( currentMainT < 0 ) currentMainT = 0;
        	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
    					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
        					document.getElementById('mainImg').src = imgList[currentMain];
    					    document.getElementById('mainText').innerHTML = clientData[currentMainT];
       						 var PD = document.getElementById('Pg');
    										var PD2 = document.getElementById('Pg2');
       		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
    				  if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
    						document.getElementById("mainText").style.display = 'inline'
    						
        return false;
    }
    
    onload = function() { ShowMain(0); }
    onload = function() { ShowMainT(0); }
    </script>
    <script language="JavaScript">
    
    
    function preloader() 
    
    {
    
    
         // counter
         var i = 0;
    
    
         // create object
         imageObj = new Image();
    
    
         // set image list
         images = new Array();
         images[0]="../Assets/Images/pt_entry+hall2.jpg"
         images[1]="../Assets/Images/pt_stair+hall.jpg"
         images[2]="../Assets/Images_Revised/40_kitchen.jpg"
         images[3]="../Assets/Images_Revised/40_stair.jpg"
    				 images[4]="../Assets/Images_Revised/C_front2.jpg"
    				 images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
         images[7]="../Assets/Images_Revised/C_side.jpg"
         images[8]="../Assets/Images_Revised/Y_combo.jpg"
         images[9]="../Assets/Images_Revised/Y_window.jpg"
    				 images[10]="../Assets/Images_Revised/V_stair.jpgg"
    
    
         // start preloading
         for(i=0; i<=3; i++) 
         {
              imageObj.src=images[i];
         }
    
    
    
    } 
    
    
    
    </script>
    <style type="text/css">
    <!--
    .style4 {color: #FF4000}
    .style6 {color: #FFFFFF}
    -->
    </style>
    </head>
    
    <body onload="javascript:preloader(); setTimeout('init()',50);">
    Code:
    <div id="gallery"><a href="#" onclick="ShowMain(0); ShowMainT(0); setColor(); return false;">1</a
    ><a href="#" onclick="ShowMain(1); ShowMainT(1); setColor(); return false;">2</a
    ><a href="#" onclick="ShowMain(2); ShowMainT(2); setColor(); return false;">3</a
    ><a href="#" onclick="ShowMain(3); ShowMainT(3); setColor(); return false;">4</a
    ><a href="#" onclick="ShowMain(4); ShowMainT(4); setColor(); return false;;">5</a
    ><a href="#" onclick="ShowMain(5); ShowMainT(5); setColor(); return false;">6</a
    ><a href="#" onclick="ShowMain(6); ShowMainT(6); setColor(); return false;">7</a
    ></div><a href="#" onclick="Prev(); return false;"><</a
    ><a href="#" onclick="Next(); return false;">></a>

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by rettgoings View Post
    Thanks for the example. Rowsdower!, can you tell me why my next button is not working? Also will this also work if I select a individual <a> from the gallery?
    You are leaving me to guess at a great deal of your code. You need to paste your full code (the entire page between your html tags) so that I can see your functions, page structure, and whether or not the ID's you are using are present. Your code could fail for any number of reasons.

    Even now I can tell you that using return ShowMainT(currentMainT-1); or anything even remotely like this will be a huge problem for this script. Don't use "return" here. Are you sure you understand what "return" does?

    Anyway, post back with your full code and we'll see what can be done.

    For now, this is a cobbled together example of what you seem to be trying to do:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test Page</title>
    <script type="text/javascript">
    //<!--
    var imgList = new Array(
    		"http://www.google.com/intl/en_ALL/images/srpr/logo1w.png",
    		"http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif",
    		"http://www.google.com/intl/en_ALL/images/logos/video_logo_lg.gif",
    		"http://maps.google.com/intl/en_us/images/logos/maps_logo.gif",
    		"http://www.gstatic.com/news/img/logo/en_us/news.gif",
    		"http://www.google.com/intl/en_us/images/logos/product_search_logo_lg.gif",
    		"https://mail.google.com/mail/help/images/logo2.gif"
    	);
    
    var clientData = new Array(
    		"This is a place holder for the first set of text.", // index 1
    		"This is a place holder for the second set of text.", // index 2 
    		"This is a place holder for the third set of text.",
    		"This is a place holder for the fourth set of text.",
    		"This is a place holder for the fifth set of text.",
    		"This is a place holder for the sixth set of text.",
    		"This is a place holder for the seventh of text."
    	);
    
    var currentMain = 0;
    var currentMainT = 0;
    var current_position=0;
    var all_links="";
    
    function init(){
    	all_links=document.getElementById('gallery').getElementsByTagName('a');
    	all_links[0].style.color="#f00";
    	ShowMain(current_position);
    }
    
    function color_me(element,color){
    	element.style.color=color;
    }
    
    function Prev(){
    	color_me(all_links[current_position],'#00f');
    	if((current_position-1)>-1){
    		current_position=current_position-1;
    	}
    	else{
    		current_position=(all_links.length-1);
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#f00');
    }
    
    function direct_selection(number){
    	all_links[current_position].style.color="#00f";
    	current_position=number;
    	ShowMain(current_position);
    	all_links[current_position].style.color="#f00";
    }
    
    function Next() {
    	color_me(all_links[current_position],'#00f');
    	if((current_position+1)<all_links.length){
    		current_position++;
    	}
    	else{
    		current_position=0;
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#f00');
    }
    
    function ShowMain(which){
    	currentMain = which;
    	currentMainT = which;
    	if ( currentMain < 0 ) currentMain = 0;
    	if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
    	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
    	document.getElementById('mainImg').src = imgList[currentMain];
    	document.getElementById('mainText').innerHTML = clientData[currentMainT];
    	var PD = document.getElementById('Pg');
    	var PD2 = document.getElementById('Pg2');
    	if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
    	if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
    	document.getElementById("mainText").style.display = 'inline';
    //	return false;
    }
    
    onload = function() { ShowMain(0); }
    onload = function() { ShowMainT(0); }
    //-->
    </script>
    <script type="text/javascript">
    //<!--
    function preloader(){
    	// counter
    	var i = 0;
    
    	// create object
    	imageObj = new Image();
    
    	// set image list
    	images = new Array();
    	images[0]="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png";
    	images[1]="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif";
    	images[2]="http://www.google.com/intl/en_ALL/images/logos/video_logo_lg.gif";
    	images[3]="http://maps.google.com/intl/en_us/images/logos/maps_logo.gif";
    	images[4]="http://www.gstatic.com/news/img/logo/en_us/news.gif";
    	images[5]="http://www.google.com/intl/en_us/images/logos/product_search_logo_lg.gif";
    	images[6]="https://mail.google.com/mail/help/images/logo2.gif";
    
    	// start preloading
    	for(i=0; i<=3; i++){
    		imageObj.src=images[i];
    	}
    }
    //-->
    </script>
    <style type="text/css">
    .style4 {color: #FF4000}
    .style6 {color: #FFFFFF}
    </style>
    </head>
    <body onload="javascript:preloader(); setTimeout('init()',50);">
    <div id="gallery">
      <a href="#" onclick="direct_selection(0);return false;" style="outline:0 none;">1</a>
      <a href="#" onclick="direct_selection(1);return false;" style="outline:0 none;">2</a>
      <a href="#" onclick="direct_selection(2);return false;" style="outline:0 none;">3</a>
      <a href="#" onclick="direct_selection(3);return false;" style="outline:0 none;">4</a>
      <a href="#" onclick="direct_selection(4);return false;" style="outline:0 none;">5</a>
      <a href="#" onclick="direct_selection(5);return false;" style="outline:0 none;">6</a>
      <a href="#" onclick="direct_selection(6);return false;" style="outline:0 none;">7</a>
    </div>
    <p id="Pg" style="margin:0;padding:0;">&nbsp;</p>
    <div style="min-height:100px;width:300px;border:1px solid #000;padding:5px 5px 20px 5px;position:relative;">
      <img src="" id="mainImg" alt="" style="/*height:50px;width:50px;*/border:1px solid #000;display:block;float:left;height:50px;margin-right:10px;" />
      <div id="mainText"></div>
      <span id="Pg2" style="position:absolute;bottom:2px;right:5px;">&nbsp;</span>
      <div style="position:absolute;bottom:2px;left:5px;">
        <a href="#" onclick="Prev(); return false;" style="text-decoration:none;outline:0 none;">&lt;</a>
        <a href="#" onclick="Next(); return false;" style="text-decoration:none;outline:0 none;">&gt;</a>
      </div>
    </div>
    </body>
    </html>
    I cleaned up some of your code (but other parts are still a mess). With functions missing and crucial elements not present I had to guess at quite a bit, too, but this has the basic functionality you need and you should be able to graft this onto you project fairly easily.
    Last edited by Rowsdower!; 07-21-2010 at 05:25 PM. Reason: Updated code a bit...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    rettgoings (07-21-2010)

  • #7
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    My beautiful script thanks to you guys! Here is an example: http://studio109plc.com/Photography/photography.html#

    Code:
    <script type="text/javascript">
    //<!--
    var imgList = new Array(
    		"../Assets/Images_Revised/40_stair.jpg",
    	"../Assets/Images_Revised/40_kitchen.jpg",
    	"../Assets/Images_Revised/C_rear_side_combo.jpg",
    	"../Assets/Images_Revised/C_front2.jpg",
    	"../Assets/Images_Revised/C_side.jpg",
    	"../Assets/Images_Revised/Y_combo.jpg",
    	"../Assets/Images_Revised/Y_window.jpg"
    	);
    
    var clientData = new Array(
    		"This is a place holder for the first set of text.", // index 1
    		"This is a place holder for the second set of text.", // index 2 
    		"This is a place holder for the third set of text.",
    		"This is a place holder for the fourth set of text.",
    		"This is a place holder for the fifth set of text.",
    		"This is a place holder for the sixth set of text.",
    		"This is a place holder for the seventh of text."
    	);
    
    var currentMain = 0;
    var currentMainT = 0;
    var current_position=0;
    var all_links="";
    
    function init(){
    	all_links=document.getElementById('gallery').getElementsByTagName('a');
    	all_links[0].style.color="#ff4000";
    	ShowMain(current_position);
    }
    
    function color_me(element,color){
    	element.style.color=color;
    }
    
    function Prev(){
    	color_me(all_links[current_position],'#555555');
    	if((current_position-1)>-1){
    		current_position=current_position-1;
    	}
    	else{
    		current_position=(all_links.length-1);
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#ff4000');
    }
    
    function direct_selection(number){
    	all_links[current_position].style.color="#555555";
    	current_position=number;
    	ShowMain(current_position);
    	all_links[current_position].style.color="#ff4000";
    }
    
    function Next() {
    	color_me(all_links[current_position],'#555555');
    	if((current_position+1)<all_links.length){
    		current_position++;
    	}
    	else{
    		current_position=0;
    	}
    	ShowMain(current_position);
    //	ShowMainT(current_position);
    	color_me(all_links[current_position],'#ff4000');
    }
    
    function ShowMain(which){
    	currentMain = which;
    	currentMainT = which;
    	if ( currentMain < 0 ) currentMain = 0;
    	if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
    	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
    	document.getElementById('mainImg').src = imgList[currentMain];
    	document.getElementById('mainText').innerHTML = clientData[currentMainT];
    	var PD = document.getElementById('Pg');
    	var PD2 = document.getElementById('Pg2');
    	
    	document.getElementById("mainText").style.display = 'inline';
    //	return false;
    }
    
    onload = function() { ShowMain(0); }
    onload = function() { ShowMainT(0); }
    //-->
    </script>
    <script type="text/javascript">
    //<!--
    function preloader(){
    	// counter
    	var i = 0;
    
    	// create object
    	imageObj = new Image();
    
    	// set image list
    	images = new Array();
    	images[0]="../Assets/Images_Revised/40_stair.jpg";
    	images[1]="../Assets/Images_Revised/40_kitchen.jpg";
    	images[2]="../Assets/Images_Revised/C_rear_side_combo.jpg";
    	images[3]="../Assets/Images_Revised/C_front2.jpg";
    	images[4]="../Assets/Images_Revised/C_side.jpg";
    	images[5]="../Assets/Images_Revised/Y_combo.jpg";
    	images[6]="../Assets/Images_Revised/Y_window.jpg";
    
    	// start preloading
    	for(i=0; i<=3; i++){
    		imageObj.src=images[i];
    	}
    }
    //-->
    </script>
    Code:
    <body onload="javascript:preloader(); setTimeout('init()',50);">
    Code:
    <td width="175" colspan="6" rowspan="3" id="cell5 images"><img vspace="55" id="mainImg" src="" alt="" /></td>
      </tr>
      <tr>
        <td width="350" height="336" colspan="3" id="cell3"><p>Supplementing the practice of architecture, architectural photographic  services are offered.* Please contact us for additional information.</p><span id="Pg2"></span>
    <div id="mainText"></div>
          </td>
    Code:
    <div style="float:right;">
    		<a href="#" onclick="Prev(); return false;" style="text-decoration:none;outline:0 none;">&nbsp;&lt;</a>
        <a href="#" onclick="Next(); return false;" style="text-decoration:none;outline:0 none;">&gt;</a></div>
    				<div id="gallery" style="float:right;">
      <a href="#" onclick="direct_selection(0);return false;" style="outline:0 none;">1</a>
      <a href="#" onclick="direct_selection(1);return false;" style="outline:0 none;">2</a>
      <a href="#" onclick="direct_selection(2);return false;" style="outline:0 none;">3</a>
      <a href="#" onclick="direct_selection(3);return false;" style="outline:0 none;">4</a>
      <a href="#" onclick="direct_selection(4);return false;" style="outline:0 none;">5</a>
      <a href="#" onclick="direct_selection(5);return false;" style="outline:0 none;">6</a>
      <a href="#" onclick="direct_selection(6);return false;" style="outline:0 none;">7</a></div>


  •  

    Posting Permissions

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