在图像映射的 HTML 标题属性中显示格式化文本答案

【问题标题】：Display formatted text in HTML title attribute over imagemap在图像映射的 HTML 标题属性中显示格式化文本
【发布时间】：2011-10-10 12:54:53
【问题描述】：

我有一个图像映射的代码，它有几个链接。目前的代码如下所示：

<img title = "Concept" border = "0" src = "${concept.png}" usemap = "#myAppMap">

<map name = "myAppMap">

   <area shape = "polygon" coords = "..." title = "title text" />
   <area shape = "polygon" coords = "..." title = "title text" />
   <area shape = "polygon" coords = "..." title = "title text" />
</map>

如果用户在每个形状的区域上运行鼠标，光标就会变成“手”并显示标题文本。但是是否可以完全格式化标题文本，以便我可以使用换行符甚至列表？

【问题讨论】：

标签： html imagemap

【解决方案1】：

我认为您可能想要删除标题文本并添加一个 mouseover 事件方法，该方法在鼠标当前位置显示一个块元素。在此元素中，您可以添加任何您想要的内容。这被称为“工具提示”，其中有几个可以在 Internet 上找到，例如 jQuery tooltip

【讨论】：

我觉得做不到。现在悬停图像时显示的文本是您指定的标题属性的浏览器实现。它是基本的 HTML，您无法使用 HTML 值或其他任何内容进行扩展。
这就是我所担心的。谢谢。
没问题...也许其他一些天才可以为您提供解决方案；）

【解决方案2】：

一年前问的几乎相同的问题，可以用 CSS 完成：

Imagemap Rollover and Tooltip

这是示例，您可以通过控制悬停时显示的容器大小来控制多行：

http://frankmanno.com/ideas/css-imagemap-redux/

如果你想更花哨并使用 jQuery：

http://www.outsharked.com/imagemapster

【讨论】：

【解决方案3】：

如果您使用某些服务器技术（例如 PHP），您可以通过在显示的字符串中添加换行符来在标题文本中创建换行符。（我使用的是 PHP_EOL，但你也可以使用 "\r\n"。）

<a href="#" title="<?php echo 'Line 1'.PHP_EOL.'Line 2'; ?>">Link</a>

当然，添加一个html实体也可以达到同样的效果：

<a href="#" title="Line 1&#10;Line2">Link</a>

我不确定这是否适用于所有浏览器，但它适用于最新版本的 Chrome、Firefox 和 Opera（2013 年 1 月）。

【讨论】：