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?
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]
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
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">
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!
Last edited by Grandpa "D"; 11-30-2012 at 07:33 PM.
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