image changing buttons

[Repatilian]

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

[Beverleyh]

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:

<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:

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; 
}

[Repatilian]

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

[Beverleyh]

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)

[Repatilian]

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

[Beverleyh]

How did this work out for you? Have you got it working how you wanted and a link to show us the result?