Question

我有一个圆形图像，分为五个部分。每个部分都转到不同的链接。它被映射为多边形。我需要创建一个悬停效果，将图像更改为新图像。更新的图像将显示每个部分（因为它悬停在上面）变成相同的图片，但在该部分上带有绿色。我为每个部分创建了带有色调的五个新图像，但不知道如何将其插入CSS和HTML。如果有一种方法可以在HTML中进行编码，那将是非常好的，因为我没有太多使用CSS（显然来自下面的代码）。

提前谢谢:) :) :)

下面的HTML：

<div Class="skyline" id="content-container" style="width: 973px">

<img src="images/Industry/Auto/MainPageButtons-Circle.png" alt="" width="973" height="500" usemap="#logos"/>

<map name="logos">

<area shape="poly" coords="423,340,486,361,490,486,381,462,308,403,266,324,387,284" href="http://pantheontile.com/Industry-Auto-Shop.html" title="Shop" alt="Shop" />
<area shape="poly" coords="629,55,691,127,728,231,715,323,598,286,591,214,546,163" href="http://pantheontile.com/Industry-Auto-Commons.html" title="Commons" alt="Commons" />
<area shape="poly" coords="348,58,440,19,540,19,628,58,546,164,485,148,430,167" href="http://pantheontile.com/Industry-Auto-Showroom.html" title="Showroom" alt="Showroom" />
<area shape="poly" coords="426,166,391,209,382,286,264,323,251,231,284,127,347,58" href="http://pantheontile.com/Industry-Auto-Exterior.html" title="Exterior" alt="Exterior" />
<area shape="poly" coords="712,323,674,399,595,464,491,485,487,361,553,341,596,286" href="http://pantheontile.com/Industry-Auto-ServiceDrive.html" title="ServiceDrive" alt="Service Drive" />
</map>

</div>

下面的CSS：

#skyline {
    width: 973px; height: 500px;
    background: url(images/Industry/Auto/MainPageButtons-Circle.png);
    margin: 10px auto; padding: 0;
    position: relative;}    
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #skyline li, #skyline a {
    height: 500px; display: block;}

  #Shop {left: 0; width: 95px}
  #Commons {left: 96px; width: 75px}
  #Showroom {left: 172px; width: 110px}
  #Exterior {left: 172px; width: 117px}
  #ServiceDrive {left: 117px; width: 220px}

  #Shop a:hover {
    background: transparent url(images/Industry/Auto/MainPageButtons-Shop.png)
    423,340,486,361,490,486,381,462,308,403,266,324,387,284 no-repeat;}
  #Commons a:hover {
    background: transparent url(images/Industry/Auto/MainPageButtons-Commons.png)
    629,55,691,127,728,231,715,323,598,286,591,214,546,163 no-repeat;}
  #Showroom a:hover {
    background: transparent url(images/Industry/Auto/MainPageButtons-Showroom.png)
    348,58,440,19,540,19,628,58,546,164,485,148,430,167 no-repeat;}
  #Exterior a:hover {
    background: transparent url(images/Industry/Auto/MainPageButtons-Exterior.png)
    426,166,391,209,382,286,264,323,251,231,284,127,347,58 no-repeat;}
  #ServiceDrive a:hover {
    background: transparent url(images/Industry/Auto/MainPageButtons-ServiceDrive.png)
    712,323,674,399,595,464,491,485,487,361,553,341,596,286 no-repeat;}

图片中的多个链接具有悬停功能

0 个答案: