Jump to content

How to place text over link image

Recommended Posts

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...