Helpful Information
Category: Web Design, HTML Reference and CSS
replacing image with a title withing a text only site: HTML, CSS, JavaScript, PHP


Im using a style switcher to enable client to switch between a graphic version and a text only version.

To remove the graphic images for the text only version, i defin img class with in my text only style sheet as the below,

display: none; visibility:hidden;

My problem is that some images are infact titles to navigation or relevant information that requires the title. How do I define so as the text title or all is replaced in stead of the image.

cheers for your time.


In a text only browser - such as lynx - you don't have to hide the images, the browser does that it's self and inserts the Alt text in it's place. However, if you are trying to get the browser to display as if text only, even if it's not, then you need to add additional conent to the html. E.g. have the title text as normal text but set it to display:none; visiblity:hidden; in the regular css. So you are always hiding one of the options and displaying the other.

This trick is commonly done on the sites. Since the entrants can't edit the html, only the css, to create graphical titles, they hide the text and set a background image to display. You may be able to replicate their trick in your css.

privacy (GDPR)