I have one multiple div which have one image in right top corner as background. I want to give some information (like title). Can any body tell how this can be achieved in case of background image.
Thanks,
Ashwani
You have to give the element that has the background image a title.
Something like:
<div style="background-image:url(image.gif);" title="image"></div>
A background image shouldn't convey any information, thus no need for a title (btw do you mean the title attribute on some element or a heading Hn?).
If you want to add a title, then you should use an img element with a correct alt that IE will incorrectly display as a tooltip. The title attribute should add complementary information, you'd better use the alt attribute alone.
Related
In this article, an interesting technique to embed icons is presented:
<img src="blank.gif" class="chromium">
.chromium {
background:url(//ssl.google.com/imagepath.png) no-repeat;
width:250px;
height:250px;
}
The above 'Google' technique I like to explain to others as a transparent window image with a background image, essentially you're looking through a transparent image to see a background image.
Essentially, a transparent .gif is embedded as inline image. Using a class on the image tag, a background image & dimensions are applied
Now my question is: Why would anyone do something like that?
To my understanding, this implies the semantic meaning of an inline image, but still enables the use of sprites to display icons.
So maybe it could be useful to mark up something like this, where icons are used that are still related to the content, often in more abstract ways:
Still I really don't get it – is there any semantic advantage over using background images for icons without the transparent .gif?
Note that the image tag is missing the alt attribute, but I didn't want to change the quoted code snippet.
No, there is no semantic advantage, that I can see.
The img doesn't have an id to make it unique, nor an alt to describe the content. And the content doesn't convey any meaning whatsoever.
If he had included an alt or an id, then maybe there was something to say for this technique. But even then, it would still have the disadvantage of wasting bandwidth, having to load two image files instead of one.
I am currently reading a book on HTML to develop websites and I came across an exercise that required me to highlight the elements in a tree diagram that would be affected by the style rule
div#intro{color: red;}
Here is an image of the solution http://i.imgur.com/y9kYlBw.jpg. I don't quite agree with it because I don't think you can give an img element the color red. Is the solution incorrect or is it my understanding of inheritance incorrect?
Well any text associated with the image will be red. If I don't provide a src, for instance, but provide alt text... the alt text will be red.
Look at this fiddle
HTML
<div id="red">
<img alt="This is my alternate text" />
</div>
CSS
#red {
color: #F00;
}
The image tag would still inherit the color, but you are right in vast majority of cases it wouldn't actually do anything. The only instance I can think of that it would be actually visible to the user would be if your image isn't found and it shows the alt text instead of the image. In this case the alt text for the image would be red.
A better example would probably have been background-color, as there are more scenarios where that would be useful. E.g. you could have padding around your image and the background colour would be visible, or if you're using a transparent PNG then the background colour would be visible behind the image when applied to the image tag.
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.
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.
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