SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Raleigh, NC
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a semi-permanent sticky button

    I have a rather unusual request from a client of mine. One that has been kicking my butt and I could use any suggestions.

    What he wants with his navigational buttons is a rollover effect, but not in the traditional sense. Instead of just having the button go from a normal state to the rollover effect (in this case, for the button to reverse colors) when the mouse is hovered over the button, he wants it that so that when you click on a button and go to a page, (e.g. Contact) that the rollover effect stays in place until the user clicks another button (e.g. Sales). That would then release the hovered state of the Contact Button and the Sales button would then assume the hovered state.

    Button Examples:

    Normal Button State:


    Hovered Button State:


    While this seemed simple enough at first, maybe just using an onHovered flag, but looking at it more, there is almost an illogic to it.

    Below is the code I am using to generate the normal rollover effect. But I am totally stumped as to how to:

    1) Make the hovered effect stick when the mouse is no longer over the button

    2) To release the hovered from the previously selected button and apply it to the next selected button.

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var sticky = true;
    
    if (document.images) {
        homebuttonup       = new Image();
        homebuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/home_131.png" ;
        homebuttondown     = new Image() ;
        homebuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/home_hover.png" ;
    
        aboutbuttonup       = new Image();
        aboutbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/about_131.png" ;
        aboutbuttondown     = new Image() ;
        aboutbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/about_hover.png" ;
    
        marketingbuttonup       = new Image();
        marketingbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_131.png" ;
        marketingbuttondown     = new Image() ;
        marketingbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_hover.png" ;
    
        salesbuttonup       = new Image();
        salesbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_131.png" ;
        salesbuttondown     = new Image() ;
        salesbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_hover.png" ;
    
        portfoliobuttonup       = new Image();
        portfoliobuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_131.png" ;
        portfoliobuttondown     = new Image() ;
        portfoliobuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_hover.png" ;
    
        contactbuttonup       = new Image();
        contactbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_131.png" ;
        contactbuttondown     = new Image() ;
        contactbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_hover.png" ;
    
    }
    
    
    function buttondown( buttonname )
    {
    	if (document.images)
    	{
    		document[ buttonname ].src = eval( buttonname + "down.src" );
    		sticky = true;
    	}
    }
    
    function buttonup ( buttonname )
    {
        if (document.images)
        {
    	      document[ buttonname ].src = eval( buttonname + "up.src" );
    		sticky = false;
        }
    }
    // -->
    </script>
    
    
    <!-- Start Wrapper and Center --->
    	<div align="center">
      	<div id="wrapper">
      
    
    	<!-- Start Banner --->
    	  <div id="banner" align="center">
    		<img src="http://charlemagnewebdesigns.com/customers/redlake/images/redlake_banner.png">
    	  </div>
    	<!-- End Banner --->
    
    
    	<!------------------------------>
    	<!---Start Topside Navigation--->
    	<!------------------------------>
    			<!--- Insert Navigation Button Labels --->
    			  <div align="center">
    			  <div id="navbar">
    			    <table class="navbar" cellspacing="0" cellpadding="0">
    				<tr>
    
    				<td class="navbar">
    				<a href="http://charlemagnewebdesigns.com/customers/redlake/index.php"
    					  onmouseover="buttondown('homebutton')"
    					  onmouseout="buttonup('homebutton')" onclick="buttondown('homebutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/home_131.png" name="homebutton" border="0" width="131" height="40" />
    				</a>
    				</td>
    
    				<td class="navbar">
    					<a href="http://charlemagnewebdesigns.com/customers/redlake/about.shtml"
    					  onmouseover="buttondown('aboutbutton')"
    					  onmouseout="buttonup('aboutbutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/about_131.png" name="aboutbutton" border="0" width="131" height="40" />
    				</a>
    				</td>
    
    				<td class="navbar">
    				<a href="http://charlemagnewebdesigns.com/customers/redlake/marketing.shtml"
    					  onmouseover="buttondown('marketingbutton')"
    					  onmouseout="buttonup('marketingbutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_131.png" name="marketingbutton" border="0" width="131" height="40" />
    				</a>
    				</td>
    
    				<td class="navbar">
    				<a href="http://charlemagnewebdesigns.com/customers/redlake/sales.shtml"
    					  onmouseover="buttondown('salesbutton')"
    					  onmouseout="buttonup('salesbutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_131.png" name="salesbutton" border="0" width="131" height="40" />
    				</a>
    				</td>
    
    				<td class="navbar">
    				<a href="http://charlemagnewebdesigns.com/customers/redlake/portfolio.shtml"
    					  onmouseover="buttondown('portfoliobutton')"
    					  onmouseout="buttonup('portfoliobutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_131.png" name="portfoliobutton" border="0" width="131" height="40" />
    				</a>
    				</td>
    
    				<td class="navbar">
    				<a href="http://charlemagnewebdesigns.com/customers/redlake/contact_us.shtml"
    					  onmouseover="buttondown('contactbutton')"
    					  onmouseout="buttonup('contactbutton')">
    					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_135.png" name="contactbutton" border="0" width="135" height="40" />
    				</a>
    				</td>
    				
    				</tr>
    				</table>
    			  </div>
    		  	</div>
    	<!---------------------------->
    	<!---End Topside Navigation--->
    	<!---------------------------->
    Thanks for any help!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Making the button stay pressed on one page is easy, but making it stay pressed when another page loads over top is trickier, I suggest you figure out how you will go about that part first.

    Probably the easiest way to do this is to take each page that has a button linking to it and make the button PERMANENTLY "down" on that page. For example in
    marketing.shtml
    the button for marketing appears with the "down" graphic, and all the rest appear normal.

    If you do that for all the pages, you basically eliminate the need for any javascript.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    /* = Image rollover
    -----------------------------------------------------------------------------*/
    function imageChange(){
    	if(!document.getElementsByTagName) return false;
    	var imgs = document.getElementsByTagName("IMG");
    	for(i=0; i<imgs.length; i++){
    		if(imgs[i].src.match("_n")){
    			//Preload Image
    			var preloadPath = imgs[i].src.replace("_n", "_x");
    			var imageObj = new Image();
    			imageObj.src=preloadPath;
    			// onmouseover change
    			imgs[i].onmouseover=function(){
    				this.src=this.src.replace("_n", "_x");
    			}
    			imgs[i].onmouseout=function(){
    				this.src=this.src.replace("_x", "_n");
    			}
    		}
    	}
    }
    
    
    /* = highlight page link
    Author: Jeremy Keith - DOM Scripting
    (Buy his Book!! It is great)
    -----------------------------------------------------------------------------*/
    function highlightPage() {
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	if (!document.getElementById("navigation")) return false;
    	var nav = document.getElementById("navigation");
    	var links = nav.getElementsByTagName("a");
    	for (var i=0; i < links.length; i++) {
    		var linkurl = links[i].getAttribute("href");
    		var currenturl = window.location.href;
    		if (currenturl.indexOf(linkurl) != -1) {
    			links[i].className = " over";
    		}
    	}
    }
    you could use these two script together to get that to work.
    you would only have to do some minor tweaking...

    just make the page highlight script go through and find the images inside the links, then replace the source if the image who's link matches the url of the current page you are on with the over image source...

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NosferatusCoffin View Post
    I have a rather unusual request from a client of mine. One that has been kicking my butt and I could use any suggestions.
    Check this out.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Raleigh, NC
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    Thanks Ali. This looks like what I need. I'll plug it in and let you know.

    Much appreciated.


Bookmarks

Posting Permissions

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