|
Make Colourful Rollover Buttons |
|
Saturday, 10 December 2005 |
|
Make Colourful Rollover Buttons This tutorial with guide you through how to make a navigation bar for your site with rollover buttons. This tutorials takes in to account that you have a reasonable knowledge of Photoshop: View Example
| 1. | Create a new document which ever size you want your navigation bar. For the purpose of this tutorial I will just be doing one button, the same technique can be applied to make a whole navigation bar. |
| 2. | I am making my button 80x40 in dimension |
| 3. | Create a new layer and make a Rectangle that takes up most of the canvas. |
| 4. | Right click the layer and click Blending Options. Use these options for your button. The colours are a variable. 
(Click for larger version) Colour: Black (#000000) 
(Click for larger version) Colour: #99FFFF 
(Click for larger version) Colour: #003399 
(Click for larger version) Highlight: White (#FFFFFF) Shadow: #000099 
(Click for larger version) 
(Click for larger version) 
(Click for larger version) 
(Click for larger version) Colour: #66CCFF to #0066CC 
(Click for larger version) Colour: #000000 |
| 5. | This will make the backing to our button. |
| 6. | Now add the text for your button. |
| 7. | This is our original button which will be displayed in its normal state. |
| 8. | Now go to File » Save for web and save as a JPEG High |
| 9. | Now we will make some modifications for the rollover. |
| 10. | For my button, I am going to make it chage from Blue to Red on the mouseover |
| 11. | To do this right click the layer again and instead of using different shades of blue, I am using different shades of red. So if there is a dark blue, I will use a dark red and so on |
| 12. | Now we have our rollover image, do the same and save as a JPEG but chose a different name. |
| 13. | Now in your HTML editor put this javascript into your <head> section: <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
} function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
} function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script> |
| 14. | To preload the images when the page loads, add this code within the <body> tag so it looks like this: <body onload="MM_preloadImages('button_roll.jpg')"> |
| 15. | For the actual rollover code it self, you use this: <a xhref="http://skeletorscorpse.com/joomla/#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','button_roll.jpg',1)"><img xsrc="button_norm.jpg" alt="Home" name="Home" width="80" height="40" border="0" id="Home" /></a> |
| 16. | For an example page go here |
|
