Geek Answers Handbook

Image Tips

I have an image and it has logos on it (this is a map), I want to have a small window with information about this location of the logo when the user moves the mouse over the specified logo.

Can I do this without using the javascript framework, and if so, are there any small libraries / scripts that will allow me to do such a thing?

+7
javascript html
source share
7 answers

Yes, you can do it without Javascript. Use an HTML image map with title attributes, for example:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"> <map name="logo"> <area shape="rect" href="" coords="52,42,121,65" title="Stack"> <area shape="rect" href="" coords="122,42,245,65" title="Overflow"> </map>

A logo refers to an image map that defines a rectangle for each of two words using the area tag. Each area tag's title tag indicates text that browsers typically display as a tooltip. The shape attribute can also indicate a circle or polygon.

+8
source share

The title attribute is the simplest solution and is guaranteed to work, and competently degrades for user attacks that do not support it.

+7
source share

Only one image does not give the browser semantic information about the logos inside. You can use the image map to provide coordinates. To get tooltips, simply apply the title attribute to each link. For more complex tooltips (for example, for styling, several lines, etc.) you need something non-standard, for example UniTip .

+5
source share

For this, MooTools has an excellent script. See MooTools Tips . Lightweight and HTML code.

Here is the demo version 1.11.

+4
source share

Indeed, mootools is one of many frameworks.
which allow you to add functionality to any element on
your web page. Here is a link to a small tutorial.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools is not really a copied framework type pair,
it encourages you to view the provided code and
show your own solution with great examples.

+3
source share

You can try the javascript widget at http://www.taggify.net/ . Script allows you to add tooltips for a part of the image — when the user moves the mouse over an area in the Script tooltip photo, draws a border around the area and fades out in other parts. A cool thing for marking people in a photo. See Demo at http://www.taggify.net/demo.aspx

+2
source share

you can use the title attribute for a simple hint. his work on almost all DOM objects.

+1
source share

More articles:


All Articles