How to replace text links with images using CSS

Ofcourse the general advantageous form in today’s web oriented world is always to use text links for the navigation of a website. Using text links helps search engine's to crawl your site, identifying content & keywords and listing them properly; because it can read the text but is uncomfortable in reading text with images.(To get more on the SEO functioning visit: SEO ).
More than often we want decorative text to have the aesthetic appeal means we do need to format a text, so that you can have effects and aliasing. Here we want to replace the text by an image containing the graphical presentation of the text or of any of the suitable image. As they are for the purpose of glitter, adding necessary flavour & to have strong visual effect; so there is no need to include them in the code. You should include them in style sheet. Just by using this bit of CSS code, you can use your text links, and then replace them in browsers with images. This way you can fulfill your both purposes. Search engines do crawl your site and can read the text and relative links plus visitors too get the pretty looks of your web pages as per your likes.
Want to implement this! Let’s take a look……..
• General Solution The technique which is widely used is to wrap the text with a inside the header tag, then use CSS to hide the text and use the header tag as an image; as shown in the given format:

How to replace text links with images using CSS

But using this technique certainly has its disadvantages in other forms:
o Adding a meaningless tag, it shows
o Nothing will be visible if the user switches off images.
o Fine with search engines but it cannot be read by visitors.


• Compatible Solution There's another technique which hides the text just by using CSS. Here the text won't be enclosed in the neutral element span, we are going to format it with the background image and absolutely positioned. In this technique text will still be readable by screen readers as well as search engine spiders. The text will be visible, if the image (for any reason) cannot be displayed otherwise; the image do covers the text.

How to replace text links with images using CSS

This way you can push the text down inside the header with a rather large line-height then the overflowing overflow: hidden hides the text. Isn’t that simple! We fulfill all our purposes and still end up with slightly clean shorter markup and according images.
So these are one of the few methods which I know. If you have some better solutions then please share it with me below this article and tell me your views on these methods of replacing text links with images.