Web Design & Development

[ Web Design & Development Topics ]

Creating Buttons in HTML

There are three states to be concerned about with a button

THE BASIC BUTTON

All the basic button consists of is an image file with a link on it. Like this one:

This is my demo button. There is no mouseover on this one.

The code is like this:

<a href="http://www.yahoo.com" target="_blank"><img src="../images/button2_up.jpg" alt="This is my demo button. There is no mouseover on this one." border="0"></a>

MAKING A MOUSEOVER BUTTON

To make a mouseover button you will use Javascript most likely. You will be learning about this in the next course. When you use something like Javascript then you are able to have it alter when the mouse is over it or the button is clicked. Here is one way of doing it (there are always many ways of doing the same thing in Javascript it seems). Let me show you one:

Demo

The code is like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-HTML40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>


<title>Javascript rollover sample page</title>
</head>

<body>
<a onmouseover="MM_swapImage('Demo','','/images/button2_down.jpg',1)" onmouseout="MM_swapImgRestore()" href="http://www.google.com/">
<img id="Demo" src="/images/button2_up.jpg" border="0" alt="Demo" /></a>


</body>
</html>

WHERE TO GET BUTTON IMAGES

Not graphically inclined? Don't have graphics software? Don't fret. You can get free buttons or even generate your own from some of the Web sites listed below:

GENERAL

General button making advice: