mouse over effect in html

Question

please tell me the html syntax with example so that when i create a hyperlinked image.i get a comment generated beside it that what does this link will do?

Answer 1

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>

Answer 2

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> 

Answer 3

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.

Answer 4

<a href="http://www.google.com" title="Go to google"><img src="/images/yourimage.png" /></a>

Answer 5

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.