Results 1 to 6 of 6

Thread: image changing buttons

  1. #1
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default image changing buttons

    Hi i was wondering if anyone one knew the code for the buttons like where the button changes when your mouse goes over it and it changes again when you click it. thanks

    shane

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    There are many ways to set-up a button but here's one way to do it if you have your button(s) set-up from list item(s). Bear in mind that there are no fancy javascript effects here - the image switch and preloading is just done with CSS.

    Your HTML:
    Code:
    <ul class="mybutton">
    	<li class="mybutton"><a href="http://www.mywebsite.com/">My Button Text</a></li>
    </ul>
    <!-- Preload button images - wont be visible on-screen -->
    <div id="mybutton-hover"></div>
    <div id="mybutton-active"></div>
    Your CSS:
    Code:
    ul.mybutton { 
    list-style: none; 
    margin: 0;
    padding: 0; 
    height: 100%; 
    }
    
    li.mybutton { 
    float: left; 
    width: 152px; /* tweek to suit - depends on width of button image */
    margin: 0; 
    padding: 0; 
    text-align: center;  
    }
    
    li.mybutton a { 
    display: block; 
    text-decoration: none;  
    padding: 15px 0; /* tweek to suit - depends on height of button image */
    background:url("http://www.mywebsite.com/images/mybutton.gif") no-repeat 0 0; 
    }
    
    li.mybutton a:hover { 
    background: url("http://www.mywebsite.com/images/mybutton-hover.gif") no-repeat 0 0; 
    }
    
    li.mybutton a:active { 
    background: url("http://www.mywebsite.com/images/mybutton-active.gif") no-repeat 0 0; 
    }
    
    div#mybutton-hover { /* preload the hover button without showing it on-screen */
    position: absolute; 
    top: 0px; 
    left: 0px;  
    width: 0px; 
    height: 0px;
    background: url("http://www.mywebsite.com/images/mybutton-hover.gif") 0 0 no-repeat; 
    }
    
    div#mybutton-active { /* preload the active-click button without showing it on-screen */
    position: absolute; 
    top: 0px; 
    left: 0px;  
    width: 0px; 
    height: 0px;
    background: url("http://www.mywebsite.com/images/mybutton-active.gif") 0 0 no-repeat; 
    }

  3. #3
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    what does the my button text part in the html mean? because i have three pictures. thanks

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Thats the text that would appear in the blank button image (About Us, More Information, Our Products, etc)

    If the text forms part of the button itself (you didnt state that originally), just replace "My Button Text" with a non-breaking space "nbsp;" but bear in mind that it's more search-engine friendly to use text links like my full example rather than the "nothingness" of an image alone (a search engine cant read what's on an image)

  5. #5
    Join Date
    Jul 2010
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    yeah i'm doing images. i'm sorry i didn't say.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    How did this work out for you? Have you got it working how you wanted and a link to show us the result?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

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
  •