Question

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

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

Answer 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;
}

干杯，

的Jeroen

Answer 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属性

OR

你可以用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');}

为每个品牌做这件事 HOpe这有助于：D

图像地图品牌标志在悬停时更改

2 个答案: