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 forums 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?

[auntnini]

tyIs this a duplicate post? Thought I already started to reply to this ????

What you have looks overly complicated and misdirected 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>

Think you should have one navigation button .CLASS with alternate background images for regular a: link and a:hover (if necessary) or. better, avoid nav-link images and just use CSS to style different states [a a:link a:visited a:hover a:focus a:active]

Have not worked out logistics of extending button width for a:hover (as you seem to want) with just CSS. But check out http://www.auntnini.com/sketch/index.htm (button position:relative parent for position:absolute hover/span notation -- otherwise avoid position:absolute)
http://www.josephdenaro.com/heads/index.html (using background image) or http://www.jacquimorgan.com -- all of which use CSS to create button effects.

Reference that might help: http://webdesign.about.com/od/css/a/aa082304.htm (vertical); and http://webdesign.about.com/od/freeme...gation-bar.htm (horizontal).

============
Duplicate post at http://www.webdeveloper.com/forum/sh...ver+link+image

[Vince616]

Hi bud,
If you add a class name to the dynamic pseudo classes visited, hover, active and link it will let you style these links without affecting all the other links in your page

a:link.menu{
  width            : 100px;
  height           : 52px;
  background-image : url('menu_button.png');
  color            : #ffff00;
  text-decoration  : none;
       }
a:visited.menu{
  width            : 100px;
  height           : 52px;
  background-image : url('menu_button.png');
  color            : #ffff00;
  text-decoration  : none;
         }
a:hover.menu{
  width            : 150px;
  height           : 52px;
  background-image : url('menu_button.png');
  color            : #00ffff;
  text-decoration  : none;
       }
a:active.menu{
  width            : 150px;
  height           : 52px;
  background-image : url('menu_button.png');
  color            : #ff0000;
  text-decoration  : none;
       }

They need to be in order as well in that the hover must come after the link and visited and the active after hover but I guess you may already be aware of that
Then all you need to do is add the class name to the link and you are good to go.

<a class="menu" href="#">Test link</a>

It is worth having a look at the w3c’s specification for css

[Chadjoh]

Ok, I have gotten rid of the javascript and am using the css hover attribute but I still get an apparent border along the right side of my background image. http://dutchbarn.net/issue03.html Notice that the first button only has a background color of red and no image; it works the way I want, however the last button shows a line or "border" even though I have the border set to 0px. What might be causing this?

[auntnini]

Haven/t tested your code, but suspect it has to due with border added to images used as links. See, for instance, http://www.boutell.com/newfaq/creating/border.html or http://perishablepress.com/css-remov...linked-images/,

Therefore add CSS style

a img {
	text-decoration: none;
	border: 0 none;
	}

[Grandpa "D"]

From what I read (I may be wrong at my age) you are looking for text to be a link?
Here is what you would do:
<a href="[where ever the page is located without these brackets but use the quotes]">This is my text</a>
Here is an example: http://variousphotography.com/
Look at the links like Fire, Food, Industrial.
Here is the code for Fire: <a target="_blank" href="fire/index.htm" style="text-decoration: none">
<font color="#CECECE">FIRE</font></a>
target="_blank" gives you a new window
href="fire/index.htm" means that in the fire folder it will look for the index.htm page
style="text-decoration: none" means that the link will not be underlined
Font color="#CECECE" gives you the color you want for your text
FIRE is the actual text that you want the people to see and it will be your link
</font> ends your font
</a> here makes the text part of the code and actually ends the code
---
I hope I understood your request and if so I hope I helped you understand.
I learned a lot with www.w3schools.com but before I knew about that I would experiment by right clicking on a page and clicking View Source.
Best of luck!

[Vince616]

Hi bud

It is the image you are using for the background “menu_bottom.png” it has its edge feathered either crop the image to get rid of the semi transparent edge or make a new image making sure that the edge doesn’t have any feathering

V

[Chadjoh]

Problem Solved! Vince616 is right there was a border pixel in the png file. All I can figure out is that on the first bit of code where I used Javascript this did not show up because Js stretches or interpolates pixels where as the css code tiles the image to stretch it. That might be good to know for other applications. Sorry about the wild goose chase but I did appreciate all the response on this forum.