在图像映射上显示 HTML 标题属性中的格式化文本
我有一个图像地图的代码，其中有一些链接。目前的代码如下所示：
<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>
如果用户将鼠标放在每个形状的区域上，光标将变成“手”并显示标题文本。但是是否可以格式化标题文本，以便我可以使用换行符甚至列表？
I have code for an imagemap which has a few links. The code currently looks like this:
<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>
Where if a user runs a mouse over the area of each shape, the cursor becomes a 'hand' and the title text is displayed. But is it possible to format the title text at all so that I can use line breaks and maybe even lists?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为您可能想要删除标题文本并添加一个鼠标悬停事件方法，该方法在鼠标当前位置上显示一个块元素。在此元素中，您可以添加任何您想要的内容。这称为“工具提示”，在互联网上可以找到几个，例如 jQuery 工具提示< /a>
I think you might want to remove the title text and add a mouseover event method that display's a block element on the mouse current's position. In this element you can add whatever you want. This is called a "tooltip" of which there are several to be found on the internet, like jQuery tooltip
一年前提出的几乎相同的问题，可以使用 CSS 来完成：
图像地图滚动和工具提示
这里是在示例中，您可以通过控制悬停时显示的容器的大小来控制多行：
http://frankmanno.com/ideas/css-imagemap-redux/
如果您想要更花哨一点并且正在使用 jQuery：
http://www.outsharked.com/imagemapster
Almost identical question asked a year ago, it can be done with CSS:
Imagemap Rollover and Tooltip
Here's the example, you can have multiple lines by nature of controlling the size of the container that shows on hover:
http://frankmanno.com/ideas/css-imagemap-redux/
If you want to get a bit more fancy and are using jQuery:
http://www.outsharked.com/imagemapster
如果您使用某种服务器技术（例如 PHP），您可以通过向显示的字符串添加换行符来在标题文本中创建换行符。 （我使用的是 PHP_EOL，但您也可以使用“\r\n”。）
当然，可以通过添加 html 实体来实现相同的结果：
我不确定这是否适用于所有浏览器，但它确实有效在最新版本的 Chrome、Firefox 和 Opera（2013 年 1 月）中。
If you're using some server technology (e.g. PHP) you can create line breaks in the title text by adding a newline char to the string being displayed. (I'm using PHP_EOL, but you could use "\r\n" too.)
Of course, the same result can be achieved by adding a html entity:
I'm not sure if this works in all browsers, but it works in the most recent versions of Chrome, Firefox and Opera (Jan 2013).