How to place text over link image

[Chadjoh]

I am trying to figure out how to place text on top of a link image. Instead of all kinds of explaining here is a link to some test code. http://dutchbarn.net/issue01.html I have found some other questions on this forum that are simular but none seem to fix my problem. The 1st, 3rd, and 4th buttons perform the way I want. The second is an example of my attempt to place a heading on top of the image of course the image does not respond to the hover condition as the heading text is covering it. I can use an individual image file for each button with the text already part of the image but search engines won't see the text and it won't be part of the "html5 outline". It also does not seem to be a clean way to write the page as more downloading is needed than seems necessary. On the last button I used the image as a background but you will notice it does not display right when hovered over. Any suggestions?

[Chadjoh]

I have posted this question on a number of forums and aside from the useless reply above I have yet to receive a single reply! Does this question expose my stupidity or what? Am I missing something that is a no-brainer; surely others have had simular situations or not? Let me know at least if I missing the obvious! Thanx

[auntnini]

Not too clear what you mean.

An HTML image tag <img src="___">does not have a link
<a href="_____"> ___</a> attribute. So, if you want viewer to click image instead of text for link, you wrap the image tag inside the link anchor tag. Like so
<a href="_____"> <img src="______"> </a>

As far as text on top of an image is concerned, think you would be using Z-index. The element has to be "positioned" to apply a z-index.

It you have online link to your page, it might clarify things.

========
Sorry, missed your link above.

[auntnini]

What you have seems too complicated to me

<style type="text/css">
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
#sidenav {
width:190px;
height:332px;
margin:100px 0px 0px 60px;
background:url('menu_rap.png');
background-repeat:no-repeat;
position:relative;
}
.navbtn {
position:absolute;
left:21px;
width:193px;
height:52px;
border:0;
}
#btn1 {top:48px;}
#btn2 {top:101px;z-index:-1;}
#btn3 {top:154px;}
#btn4 {top:207px;}
#txt5 {position:absolute;
width:193px;
height:52px;
left:21px;
background-image: url('menu_button.png');
top:260px;
}
h3 {position:absolute;top:103px;
left:26px;
}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
function navbtnlong(x)
{x.style.width="200px";}
function navbtnshort(x)
{x.style.width="193px";}
</script>

Can't you just have one button and use the CSS a:hover to change the width, etc.? It's best to avoid images for link buttons.