mouse over effect in html
please tell me the html syntax with exa开发者_C百科mple so that when i create a hyperlinked image.i get a comment generated beside it that what does this link will do?
For a system-standard tooltip, use the title attribute (works for almost any elements; accepts text only, some browsers truncate after a few hundred characters):
<a href="url" title="supplemental text">link contents</a>
For arbitrary content to appear on hover:
a:not(:hover) .supplement { display: none; }
a .supplement { position: absolute; }
...
<a href="url">link contents <span class="supplement">supplemental text</span></a>
This works regardless whether "link contents" is text or an image, by the way.
<a href="http://www.google.com" title="Go to google"><img src="/images/yourimage.png" /></a>
You mean like a hover over message? You can do that by just adding a title
to the link tag:
<a title="add a comment to this post">add comment</a>
Something like this I suppose:
<img src="worldmap.jpg" alt="Worldmap" title="Map of the World" usemap="#world">
<map name="world">
<area href="uk.html" alt="United Kingdom" title="United Kingdom" shape="poly" coords="150,217,190,257,150,297,110,257">
<area href="us.html" alt="United States" title="United States" shape="poly" coords="10,20,100,20,120,100,5,110">
</map>
I think you're asking about the alt attribute for images. In some browsers when you mouseover the image the contents of the alt tag are shown but not in all browsers.
<img src="image.jpg alt="Some text here" />
If you want context help then you'll have to accomplish this with javascript, sorry but I'm unable to provide an example.
精彩评论