Are there any common problems why alt attributes on images wont work.
Tested for IE8 Standards mode.
Thanks in adv.
if you want to show text from alt attrib, use title='' attrib.
The difference:
alt shows up instead of img - when img cant load
title shows up when you mouseover the image
alt means just that, an alternative for when the image isn't displayed. If you want a tooltip, use title or longdesc. Historically alt has been abused to mean this, but IE8 has finally fixed this.
By "not work" I'm assuming you mean that the alt text doesn't appear when you hover over the image. You'll need to use the title attribute if you always want the text to appear in all browsers:
<img src="foo.png" alt="bar" title="bar" />
Yes, you should always specify the alt attribute for these reasons:
In case image is not found:
The text from alt will be shown instead
The alt tag is important in terms of Search Engine Optimization (SEO)
Accessibility reasons
Related
I'm not good enough in JavaScript/jQuery to make my own gallery or modify an existing one. I'm using UniteGallery script which provide a nice looking tiles style gallery.
The problem is that I wanted a link to be displayed when the image is zoomed. And the only diplayed text when the image is clicked on, is the alt attribute.
So I'm wondering if I can put an <a> tag inside the alt attribute of the image. I know it's not what alt attribute should be for, but W3C validator doesn't seem to mind about that.
<img alt="Image 1 Title <a class='button' href='project1.html' target='_blank'>More</a>"
src="img/gallery/thumbs/image1.png" data-image="img/gallery/image1HD.png" data-description="Image 1 Description"/>
Do you think that's ok? (I don't even know what the data-description is used for in unitegallery.) If you got any other solution, I'll be glad to read it.
I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)
You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.
This is exactly why the alt attr exists,.
If possible, I would ditch the div and just use an h2 with an id and set a background image to that.
I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.
You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed.
<img src="" alt="This text will be displayed" />
Google doesn't like what you describe:
http://www.google.com/support/webmasters/bin/answer.py?answer=66353
However, from a pure design perspective, there is no real problem, save some bloated code.
You might want to see how often your images fail before you attempt any changes.
That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.
so far i was doing it like this:
<img src="image.png" alt="Keyword" />
Now, i discovered that images can have title attribute too:
<img src="image.png" alt="Keyword" title="Keyword"/>
Is there any other optimization i could pull off to boost image links value?
I think that's the best you can do really, someone told me to try and make image names as descriptive as possible, for instance:
image_001.jpg --> honda_accord_2009.jpg
Granted image.png is just an example, but it might apply.
That's all I could think of.
Think of the alt attribute as an alternative text replacement for the image. Imagine for a moment that you had to describe the image to someone who could not see it. That is the sort of information you should be conveying in the alt attribute.
Similar to the alt attribute, title is used for the same purpose. It helps to convey extra information about an element. You can apply the title attribute to most elements but you must give all your images an alt attribute.
In my opinion, having both an alt and a title on an image is redundant, especially if they are conveying the same information.
I would have to say yes, the title tag would add value to your SEO. Check this link for full details - http://www.seocentral.com/tutorials/alt-title-attributes.html
Don't over-optimize your links and/or images.
As other users pointed out every image should contain an alt-attribute.
On decorative images the alt tag should be places but it should be empty since it doesn't convey any information.
The alt tag should describe the meaning of the image within the current context. Imagine trying to explain the image to a blind person. If you can't come up with a good way to explain why the image is relevant there the alt tag should be empty (if the image should be placed there at all)
Check out this article for more information on that:
http://www.userfocus.co.uk/articles/alt_text.html
The title tag creates this little popup when you hover over the link or image for about a second. This should be used to give the describe the image and might be a better place to put a keyword.
What you also missed in the question is the filename. If the image is relevant to the topic of the page you could use keyword.jpg or something.
This would also help it in image search engines.
To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.
However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.
Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?
<img src="..." title="text that gets displayed as a popup but I don't want it to" />
You don't have to have a title to be compliant, you need an alt.
The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.
This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..
Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).
Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o
alt="Goooooooogle!"
title="" />
If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.
I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.
<img style="position:absolute;
top:0;left:0;width:200px;height:200px;"
src="yourImage.gif" alt="the text you don't want to show"
title="the text you don't want to show"/>
<div style="position:absolute;
top:0;left:0;height:200px;width:200px;
z-index:1000;filter:alpha(opacity=01);
-moz-opacity:0.01;background-color:gray;">
</div>
Again, I don't suggest this, but this is just to show that there is a way...
It has been a while since this post, but I figure for all those who wander here from Google, here's my 2 cents:
The alt tag is fully valid--required even. The last solution works in nearly every browser, and where it doesn't work, a tiny rectangular tooltip will be shown with no text. The title tag overrides the alt tag and forces a specific tooltip to be shown. I don't know why people voted this down, considering it's the best solution here.
For those of you who see this as a bad markup: for a general website, yes, this isn't good practice. This is a modern age of the web, however, and you have to also consider web applications and very obscure one-off situations where this might be the best possible solution given the markup options we have to work with. We all know web 2.0 is only MOSTLY there. ;)
PROPOSED ALTERNATIVE:
Personally, I would suggest creating a div the size of the image and setting its background-image to the src that you want to use. There is DEFINITELY no tooltip this way, regardless of browser, and it's 100% compliant with everything. This will not work if it's an inline image, but it's pretty rare to use an image inline with text and not want a tooltip (an icon beside links, for instance, a great tooltip might be "External Link", or for a mailto:, "Send an email to:", etc.)
I am using ActiveScaffold in a Ruby on Rails app, and to save space in the table I have replaced the default "actions" text in the table (ie. "edit", "delete", "show") with icons using CSS. I have also added a couple of custom actions with action_link.add ("move" and "copy").
For clarity, I would like to have a tooltip pop up with the related action (ie. "edit", "copy") when I hover the mouse over the icon.
I thought I could do this by adding a simple "alt" definition to the tag, but that doesn't appear to work.
Can somebody point me in the right direction?
The alt attribute is to be used as an alternative to the image, in the case of the image missing, or in a text only browser.
IE got it wrong, when they made alt appear as a tooltip. It was never meant to be that.
The correct attribute for this is title, which of course doesn't do a tooltip in IE.
So, to do have a tooltip show up in both IE, and FireFox/Safari/Chrome/Opera, use both an alt attribute and a title attribute.
Just a minor point to add to this thread... there is no alt tag or title tag. The alt attribute is for images, but all other elements on a page can have a title attribute, which is the best choice for cross browser compatibility.
<span title="Click here to edit the foo">
Edit
</span>
You want a "title" tag. I'm not sure if this is necessary anymore, but I usually add both alt and title tags to make sure all browsers display the tool tip the same.
The alt property of an img tag works in some browsers, but not all (such as some mozilla-based ones).
The "right way" to do this is to use the title property.
Tooltips in HTML are the contents of the alt text for image tags, but if you're setting this using CSS you probably have a background:url(...); style instead of an image.
Use alt on the images and title on the links.
As Prestaul pointed out, the alt tag should work for images and title for links. However, this is also browser dependent...most browsers should implement functionality that displays this metadata as tooltips but they aren't required to do so.
Realizing, as Joel Coehoom pointed out, that my icon was actually a background image, I created a transparent.gif image with title and alt attributes over top of the background, and voila - tooltips!
good tool here
http://www.guangmingsoft.net/htmlsnapshot/html2image.htm
you can just use the tag abbr and the tittle atribute with your test
eg <abbr tittle="some text"> </abbr>
as that answer https://stackoverflow.com/a/61601175/9442717