地图 <area> 背景图像未显示答案

【问题标题】：map <area> background image not being displayed地图 <area> 背景图像未显示
【发布时间】：2012-08-15 07:15:34
【问题描述】：

当用户将鼠标悬停在地图区域上时，我正在尝试显示地图区域的背景图像。目前我已经为每个区域指定了一个单独的 id，并且我编写了一个 javascript 函数，该函数在该区域悬停时触发。我向这个函数传递了元素 id，通过查看控制台，我知道正在使用正确的元素调用该函数，但没有显示背景！目前我只实现了 products 标签中的功能。

我还尝试为该区域提供 9999 的 z-index 和固定的宽度/最小宽度和高度/最小高度。

这里是网站https://dl.dropbox.com/u/14863356/OsmosysV3/index.html

注意：对于面临此问题的其他人来说，Chrome 或 safari 要求您为 map 声明 name 属性，即使它已被弃用。

【问题讨论】：

标签： javascript css

【解决方案1】：

为什么你甚至需要 javascript？在 CSS 中你不能这样做：

#welcome{
  height: 300px; // or whatever
  &:hover{
    background: url("welcome.jpg")
  }
}

其他元素也一样。

【讨论】：

@verticas1 这不起作用。我想你可能误解了我的问题。我说的是悬停在图像地图的区域元素上。如果您将鼠标悬停在#slideshow 中的产品上，然后将鼠标悬停在产品名称上，您会发现每个产品都有标签。当我将鼠标悬停在区域标签上时，我希望它们的背景发生变化。目前它们具有透明背景。

【解决方案2】：

根据这个Visible Area Tag 图像地图区域没有视觉表示，因此没有css反映在它们上面。如果您想在地图上悬停效果，则可以通过关注this link

这可能不是最好的方法，但它确实有效。

【讨论】：