Basically I want something like this, <img src="doesntexist.png alt="Image does <b>Not</b> exist" />.
Edit Thanks for the info, but I was hoping to accomplish this without JavaScript.
-
2See: stackoverflow.com/questions/4275737/…– seanbreedenCommented Mar 9, 2013 at 3:23
Add a comment
|
2 Answers
You can't do what you're asking with traditional HTML.
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
http://www.w3.org/QA/Tips/altAttribute
Alt attributes are used to display a text description of an image whenever the image is not available, is not displayed by the browser, or the image cannot be seen by the user. Some users can be blind, color-blind, or low-sighted. The alt attribute is used in such cases to aid users by describing the intent of the image.
You might want to look into something like a tooltip. With tooltips you can customize the style and how they appear to the end user. There are a bunch of them out there. One example is jQuery's Tooltip: http://jqueryui.com/tooltip/#custom-style
-
1Tooltips are not the same as alternate content when the image doesn't exist. Commented Mar 9, 2013 at 3:45
-
I'm aware of this, but the OP did not really make it clear what he was using this for. It's very possible his intent was to do something like a tooltip. In case it was, I wanted to point him in the right direction.– TuanCommented Mar 9, 2013 at 3:52
-
... I thought it was pretty clear. Anyways I am asking about the alt attribute specifically, not the title attribute (which I've been lead to believe will produce a tool-tip like effect).– JohnCommented Mar 9, 2013 at 3:55
-
1I'm still not sure why you would want to do this. What purpose does it serve? The alt attribute is used for a specific thing--it provides alternative text. Screen readers--like JAWS--read the alt attribute to blind people. It's part of the markup and should be considered content, not presentation. There's no native way to style part of the attribute. You might want to re-evaluate the actual problem and approach it differently.– TuanCommented Mar 9, 2013 at 5:31
Unfortunately no. It can however be replicated to allow markup with Javascript.
function altContent(img) {
var alt = document.createElement('div');
alt.innerHTML = img.getAttribute('alt');
img.parentNode.replaceChild(alt, img);
}
Then just add the attribute onerror to the image, like so.
<img src="doesntexist.png alt="Image does <b>Not</b> exist" onerror="altContent(this)" />
answered Mar 9, 2013 at 3:27
