圖片上的工具提示

Question

我有一個圖片，並在其上是徽標（這是一張地圖），我想要一個小盒子彈出有關該徽標位置的信息，當用戶將鼠標移動到所述徽標上時。

我可以在不使用JavaScript框架的情況下做到這一點，如果有的話，是否有任何小型庫/腳本可以讓我做這樣的事情？

Answer 1

是的，你可以做到這一點沒有Javascript。使用HTML圖像映射，具有標題屬性，像這樣：

<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> 

堆棧上溢標誌指image map，其定義爲每個使用area標籤的兩個詞的一個矩形。每個area標籤的title元素指定瀏覽器通常顯示爲工具提示的文本。 shape屬性也可以指定一個圓或多邊形。

Answer 2

僅單個圖像不會爲瀏覽器提供內部徽標的語義信息。您可以使用image map來提供座標。要實現工具提示，只需將title屬性應用於每個鏈接。對於更復雜的工具提示（例如造型，多行等），您需要非標準的東西，例如UniTip。

Answer 3

MooTools有一個漂亮的腳本。見MooTools Tips。 HTML上的輕量級也是如此。

這裏是1.11版本的demo。

Answer 4

title屬性是最簡單的解決方案，並保證能夠正常工作，和對於不支持正確操作的useragents會優雅地降級。

Answer 5

事實上MooTools是許多框架
，讓您在
網頁功能添加到任何元素之一。這是一個小教程的鏈接。
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

MooTools是不是一個真正的複製粘貼式的框架，
它鼓勵你過目提供的代碼和
滾你一些很好的例子自己的解決方案。

Answer 6

您可以嘗試JavaScript小部件在http://www.taggify.net/。腳本允許爲圖像部分添加工具提示 - 當用戶將鼠標移到照片上的區域時，腳本彈出工具提示，在區域周圍繪製邊框並淡化其他部分。很酷的東西在照片上標記人物。請參閱http://www.taggify.net/demo.aspx的演示

Answer 7

您可以使用title屬性獲取簡單的工具提示。它在幾乎所有的DOM對象上都有作品。