Make Colourful Rollover Buttons

Posted on Sat, 2005-12-10 19:42

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 href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','button_roll.jpg',1)"><img src="button_norm.jpg" alt="Home" name="Home" width="80" height="40" border="0" id="Home" /></a>
16.

For an example page go here