How to create an ALT text with multiple lines and line breaks

Introduction

This is just a quick tutorial on how to create multiple lines in an ALT text field. I had the issue of a client wanting to show a biography page with loads of images, and when a user hovers over an image, the ALT tag must show the name, occupation, and company name.

Of course, the nice way of doing this is with a DHTML popup or something similar, but due to time and budget restrictions, a differrnt method had to be found.....step forward the alt text.

Remember!!!!

The alternative text field is not there for this use actually!! The two main uses are to first show some text if the image couldn't load so the visitor can at least know what the image was about, and secondly for Google search engines, of course!!

Don't over estimate the value of the ALT text field as it is not a really big thing, and try to avoid it than use it for the use I am showing here.

Downside

As always, there is a downside. I haven't had too much time to test everything about this, and couldn't find much information on the internet about this (although a thorough search might prove me wrong), but from my testing, this only works in IE version 5 and higher and some versions of Mozilla. Couldn't get it to work on Netscape and didn't have time to test in Opera, but if I had to take a guess, it doesn't work there!! So be careful.

Code

As always, you can do it in a programming language like C#, I am only going to explain the HTML version. Adjust the code to fit your style:

We want an image to have multiple ALT text. The ALT text should contain the name, company, and date for illustration purposes. Remember that the ALT text field doesn't take any HTML code!! So no use trying to input <br> tags in there. Trust me in that /n will not work either!! The only thing that I can find that works in this case is HTML character codes. I know, I know, I can hear you say duh... well, I wasn't sure about it, so I thought I'll just say it!!

The HTML character code for line feed is &#10 but carriage return &#13 will also work, so we input that in the text we want in the ALT.

And there we go, a quick simple example of how to increase the use of the ALT tag!!

Conclusion

I can't overstate that this is not the ideal way, but it can serve as an extra way to save some time or even cut down on budget prices!! Also, all other HTML character codes should work, but again, I haven't tested this, so go ahead and play around!!

Let me know what you think.

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)