开发者

mouse over effect in html

开发者 https://www.devze.com 2022-12-15 11:18 出处:网络
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, us

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消