javascript: alt attribute with special characters

Question

Possible Duplicate:
Alt attribute encoding with JavaScript

I can't seem to assign special characters using javascript in alt tags and have them render in any browser.

Without javascript, special characters in alt tags render fine (Pepsi™):

<img id="pic" src="path/to/image.jpg" alt="Pepsi&trade;" />

However, when assigning this same value via javascript or jquery you get (Coke™).

$("#pic").attr("alt","Coke™") or image = document.getElementById('pic'); image.alt="Pepsi™"

This issue exists in chrome and IE6; I haven't tried other browsers. Any ideas?

Answer 1

First of all, you should be putting that text in the "title" attribute, not "alt". The "alt" attribute should contain text to be shown when the image cannot be shown. The "title" attribute provides explanatory text that a rendering agent can use as it sees fit, and flyover text is the primary example of that. Using your example, the "alt" attribute might be "Pepsi logo", while the "title" would be the fancy value. (In this case there's not much difference, but the point is that those two attributes really are quite different in purpose.)

If you need to get those special characters in via Javascript, you have to provide the Unicode values with Javascript escapes like \uNNNN where "NNNN" are hex digits. I think that the trademark symbol, for example, would be "\u00AE" as a Javascript string.

Answer 2

Try -

$("#pic").attr("alt","coke\u2122");