[dstudentx]

I have a image carousel with pre and next... Also there are hyperlinks the go along with the images being shown. How can I get the hyperlinks to change red when the related image is shown?

I was thinking a counter to identify/related the image the and hyperlink
here is my code related to the problem

jQuery("#gallery-prev").click(function(){
			if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
				jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
			}
			return false;
		});
		
		
		
		jQuery("#gallery-next").click(function(){
			if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated"))
			{
				jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
			}
			return false;
		});

<div id="gallery-controls">
         <a href="#" id="gallery-prev"><img src="MAIN_IMAGES/left.png" alt="" /></a>
         <a href="#" id="gallery-next"><img src="MAIN_IMAGES/right.png" alt="" /></a></div>
            
   <div id='navbot'> 
   <a href="#">PROFORMANCE</a>
   <br>
    <a href="#">&nbsp&nbsp&nbspSPORTSWEAR</a>         
	</div>


        <div id ='navbotimg'>
        <img src="MAIN_IMAGES/red_line.png" width="8" height="60"> </div> 

        <div id ='navbot2'>
            <a class="ex1" href="#">ZOOM FORCE I BOOT ///</a>            
		  <a class="ex1" href="#">MERCURIAL SUPERFLY ///</a> 
		  <a class="ex1" href="#">AIRMAX MOTO BOOT ///</a> 
		  <a class="ex1" href="#">JOAKIM NOAH ///</a> 
          <a class="ex1" href="#">DUNK GYRIZO</a> 			      
		</div>

        <div id ='navbot3'>
          	<ul id="mail1">  
          <a class="ex1 various" href="NIKE_AIRMAX_90.html">AIRMAX 90 ///</a>            
		  <a class="ex1 various" href="sub_page_org.html" href="#">ORIGINALS ///</a> 
		  <a class="ex1 various" href="SUB_PAGE_CORTEZ_FLYMOTION.html" >CORTEZ FLY MOION ///</a> 
		  <a class="ex1 various" href="SUB-PAGE-ARTHUR_ASH.html">ARTHUR ASHE ///</a> 
          <a class="ex1 various" href="SUB_PAGE_STUSSY_DUNK_TRAINER.html">STUSSY DUNK TRAINER ///</a> 
          <a class="ex1 various"href="SUB_PAGE_AIR_MAX_1.html">AIR MAX I MAXIM</a>            
             <li><a class="mail1" href="mailto:[email protected]">[email protected]</a></li>    
             </ul>
          	<div align="left"></div>
        </div>

[Kruithne]

Hello dstudentx,

I think you might have missed a little code from your question, I can't see any code for the reference gallery DIV.

Going from what you've said and shown, I think the best solution would be to store the links in an array depending on which image they will be displayed with.

// The array of links
var links = ['unicorns.html', 'mordor.html', 'ponies.html'];

// Somewhere inside your next/previous function
$('#theAnchorTag').attr('href', links[currentIndex]);

Obviously currentIndex would start out as 0 and increase/decrease with every next/previous call respectively.

[JackOfAllTrades]

Moved to jQuery forum