Question

I’d like to make my webpage highly compatible; so when a user turns off all styles when browsing my sites, I want them to be able to find everything in text. The problem is that some of my webpages use image buttons like the following:

<a href="next.html"><img src="images/next_button.png"></a>

This is a problem since when I visit a page with such a button (in no styles mode), I get the button image instead of a text link. How can I substitute the image button with a text link in such a case? Thanks!

Answer 1

The solution is to use only texts in the HTML and stylize them with images in the css:

HTML:

<a href="next.html" class="next-button"><span>Next</span></a>

CSS:

.next-button
{
    display: inline-block;
    width: 100px; /* image width */
    height: 20px; /* image height */
    background: url("../images/next_button.png")
}

.next-button span
{
    display: none;
}

Edit: Hide text when showing background using an additional span tag