Question

我有一个有几个链接的imagemap代码。代码目前看起来像这样：

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

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

Answer 1

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

Answer 2

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

Imagemap Rollover and Tooltip

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

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

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

http://www.outsharked.com/imagemapster

Answer 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月）。

在imagemap上的HTML title属性中显示格式化文本

3 个答案: