图像地图品牌徽标在悬停时更改答案

【问题标题】：image map brand logo change on hover图像地图品牌徽标在悬停时更改
【发布时间】：2013-07-08 12:00:27
【问题描述】：

我找到了很多解决此主题的帖子，但是我的代码仍然遇到问题：

    <div id="product_tabs_description_tabbed_contents" style="display: block;"><img style="margin-left: -10px; opacity: 1 !important;" src="{{media url="brands.png"}}" alt="" width="754" usemap="#brands_map" /></div>
<a href="javascript:void(0)"><map class="maptest" name="brands_map"> 
<area title="Nike" shape="rect" coords="4,3,73,41" href="#" alt="Nike" class="0" />

<area title="Lonsdale" shape="rect" coords="99,7,168,45" href="#" alt="Lonsdale" class="1" />

<area title="No Fear" shape="rect" coords="206,5,284,42" href="#" alt="No Fear" class="2" />

<area title="Karrimor" shape="rect" coords="317,9,376,62" href="#" alt="Karrimor" class="3" />
 </map> </a>

我拥有的是黑白的 first.png 和彩色的 second.png。我需要在悬停时为当前品牌着色。示例可见：http://www.bestsports.sk/

我正在使用图像映射，但我不知道如何配置 css 以使其工作。我也无法访问我的外部 css 文件，所以我必须将 css 代码直接放在 html 中。

【问题讨论】：

src="{{media url="brands.png"}}"你确定吗？？
另外，class="1" 无效并且在大多数浏览器中不起作用，切勿在类或 id 名称的开头使用数字。见w3schools

标签： html css image map hover

【解决方案1】：

您可以应用以下内容（我也包含了一个不错的 CSS 淡入过渡）

HTML：

<div class="logo">
 <!-- black and white logo --> 
     <img src="batman-logo-bw.png" />
     <div class="logocolor">
        <!-- color logo --> 
        <img src="batman-logo-color.png" />
     </div>
  </div>

CSS：

div.logo {
  float:left;
  margin:20px;
  position:relative;
}

div.logo div.logocolor {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover div.logocolor {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

看我的小提琴：

http://jsfiddle.net/XhDBw/1/

您也可以删除第二个嵌套的 div，只使用 img。在这种情况下，应用以下 CSS 将第二个图像作为 last-child 处理：

div.logo img:last-child {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover img:last-child {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

干杯，

杰伦

【讨论】：

【解决方案2】：

你不需要任何地图标签来实现这一点你可以通过两种方式做到这一点

<li><a href="#" id="first"><img src="blackenwhite.jpg"></a></li>
<li><a href="#" id="first"><img src="blackenwhite.jpg"></a></li>

然后在悬停事件中通过 jquery 更改图像的 src 属性

或

你可以用 css 来做，这更容易

<li><a href="#" id="first" class="brands">Brand 1</a></li>
<li><a href="#" id="first" class="brands">Brand 2</a></li>

这将是 css

.brands { text-indent:-1000px;}
#first {background:url('blackenwhite.jpg') no-repeat center center;}
#first:hover {background:url('color.jpg');}

为每个品牌执行此操作希望这会有所帮助：D

【讨论】：

你不应该使用 2 个同名的 id。