0

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

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

4

2 回答 2

0

您可以应用以下内容（我也包含了一个不错的 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 将第二个图像作为最后一个子图像处理：

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

干杯，

杰伦

于 2013-07-08T15:03:15.250 回答
-1

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

<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

于 2013-07-08T12:08:04.530 回答