HTML BUTTON LINKS

Button Links

Your button link images can look like anything it's just and image, photo whatever that you use and that fits in with your website. If you have a number of links you could fit the images in a table or you could create one image and use map links. This is the basic start to button links.

To get this email link

add the following
<A HREF="mailto:your_email_address@here"><IMG SRC="but_eml.gif" ALT="this opens your email to compose new mail" Title="this opens your email to compose new mail" BORDER=0 HEIGHT=32 WIDTH=128></A>
instead of the "mailto:...." this could be "http://www.where_ever" to take you somewhere else on the net or "blahblah.htm" to get you to another html file or a picture (jpg or gif) and the button image (but_eml.gif) could be a picture (gif or jpg) the popup message could be the place the link takes you, or if it's the a full size picture version of the thumbnail, you could have "click to enlarge" i.e.

<A HREF="picagif.gif"><IMG SRC="picagif.gif" ALT="Click to Enlarge thumb nail" Title="Click to Enlarge thumb nail" BORDER=0 HEIGHT=33 WIDTH=50></A>
BORDER, HEIGHT& WIDTH speak for themselves, you could change the size of the image your using as I have in this example but normally you'd just put in the image sizes as is, changing sizes here will not give good results and if your reducing a large picture to be a button/link it will be slow to load. You don't have to put a size in but if it doesn't load up straight away it will not alocate a space so as images/buttons arrive the rest of your page will change to suit.
When you pass your cursor over the image a message should pop up "this opens your email to compose new mail"
title="this opens your email to compose new mail"
alt="this opens your email to compose new mail"
These gets your browser to display text when your cursor moves over it.
ALT was incase you don't have pictures switched on you get the alternative message "this is a picture of a button" whatever, but generally it's used to say "click this to do something" which has been fine until lately when it doesn't work with newer browsers so you have to use title="whatever" you can put in both only one seems to work depending on your browser. But I guess you'd have to take the line that the title command is the newest so just use that. Pass your cursor over this to find out what works on yours.

Source Code
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="Author" content="nik">
 <meta name="GENERATOR" content="Mozilla/4.8 [en] (Windows NT 5.0; U) [Netscape]">
 <title>Button links</title>
</head>
<body text="#000000" bgcolor="#FFFF99" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<center>Button Links</center>
<blockquote>Your button link images can look like anything
it's just and image, photo whatever that you use and that fits in with
your website. If you have a number of links you could fit the images in
a <a href="table.htm">table</a> or you could create one image and use <a href="map.htm">map
links</a>. This is the basic start to button links.
  
To get this email link</blockquote>
<blockquote><a href="mailto:your_email_address@here"><img SRC="but_eml.gif" ALT="this opens your email to compose new mail" BORDER=0 title="this opens your email to compose new mail<iheight=32 width=128></a>
add the following
<A HREF="mailto:your_email_address@here"><IMG SRC="but_eml.gif"
ALT="this opens your email to compose new mail" Title="this opens your
email to compose new mail" BORDER=0 HEIGHT=32 WIDTH=128></A>
instead of the "mailto:...." this could be "http://www.where_ever"
to take you somewhere else on the net or "blahblah.htm" to get you to another
html file or a picture (jpg or gif) and the button
image (but_eml.gif) could be a picture (gif or jpg) the
popup message could be the place the link takes you, or if it's the a full
size picture version of the thumbnail, you could have "click to enlarge"
i.e.
<a href="picagif.gif"><img SRC="picagif.gif" ALT="Click to Enlarge thumb nail - ALT COMMAND" BORDER=0 title="Click to Enlarge thumb nail - TITLE COMMA<imgheight=50 width=75></a>
<A HREF="picagif.gif"><IMG SRC="picagif.gif" ALT="Click
to Enlarge thumb nail" Title="Click to Enlarge thumb nail" BORDER=0 HEIGHT=33
WIDTH=50></A>
BORDER, HEIGHT& WIDTH speak for themselves, you could
change the size of the image your using as I have in this example but normally
you'd just put in the image sizes as is, changing sizes here will not give
good results and if your reducing a large picture to be a button/link it
will be slow to load. You don't have to put a size in but if it doesn't
load up straight away it will not alocate a space so as images/buttons
arrive the rest of your page will change to suit.
When you pass your cursor over the image a message should
pop up "this opens your email to compose new mail"
 title="this opens your email to compose new mail"
 alt="this opens your email to compose new mail"
 These gets your browser to display text when your cursor
moves over it.
 ALT was incase you don't have pictures switched on you
get the alternative message "this is a picture of a button" whatever, but
generally it's used to say "click this to do something" which has been
fine until lately when it doesn't work with newer browsers so you have
to use title="whatever" you can put in both only one seems to work depending
on your browser. But I guess you'd have to take the line that the title
command is the newest so just use that. Pass your cursor over this <img SRC="link.jpg" ALT="ALT Command Works" title="TITLE Command Works" >
to find out what works on yours.
<center>
<a href="index.htm"><img SRC="but_home.gif" ALT="Home" BORDER=0 title="Home" height=32 width=128></a></center>
</blockquote>
</body>
</html>