Question

所以我正在尝试使用Image Mapping，CSS Sprites和jQuery来构建网站的这一部分。想象一个徽标（图像）有3个映射点（第一个字母，中间字母和最后一个字母）。图像上的每个映射区域都具有#ref的href，并且当点击每个映射区域时，jQuery显示隐藏的div。直到这部分我已经确定了。

这是我似乎无法解决的问题。我想使用某种JavaScript或jQuery函数'onmouseover'或类似的东西，这样一旦用户将鼠标悬停在每个特定的映射区域上，就会显示基于文本的div。把它想象成一个菜单。一旦鼠标悬停在映射区域上，就会在上面显示一个小文本，例如“联系”。

解决了这个问题后，我需要以某种方式将CSS Sprites合并到主映射图像中。一旦人将鼠标悬停在映射区域上，我希望对图像实现“缓慢”淡入淡出。基本上我的精灵图像有4个阶段：1 - 中性标志，2 - 当映射区域1悬停时，徽标的其余部分变为黑白，3 - 与2相同但在映射区域2和4 - 相同2和3，但有映射区域3. [我找不到更好的方式来描述]。

我已经阅读了所有内容，通过stackoverflow和其他论坛进行了研究，但我似乎无法混合和匹配这三件事。我的代码如下，如果有人能提供帮助，我真的很感激。

如果需要进一步澄清，请与我们联系。提前致谢

Here就像我正在做的那样。 DELTA（三角形）是映射出的区域。

的 HTML

<header>
  <img src="img/starcadian.png" usemap="#logo" id="menumap" />

      <map name='logo'>
        <area shape='poly' coords='253, 66, 260, 79, 275, 135, 282, 161, 288, 172, 284, 174, 192, 175, 189, 168, 194, 162, 202, 153, 229, 103, 250, 69' href='#' alt="see" class="show_hide" id="see" />
        <div class="slidingDiv">
          <iframe src="http://player.vimeo.com/video/43356088" width="460" height="260" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
          </iframe>
          <iframe src="http://player.vimeo.com/video/75168156" width="460" height="260" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
          </iframe>
          <a href="#" class="show_hide">
          </a>
        </div>

        <area shape='poly' coords='875, 66, 867, 85, 851, 140, 847, 156, 839, 169, 841, 173, 846, 176, 935, 174, 939, 173, 939, 168, 934, 164, 927, 153, 906, 118, 888, 85, 878, 69' href='#' class="show_hide2" id="listen" alt="listen" />
        <div class="slidingDiv2">
          <center>
            <ul>
              <li>
                <a href="http://www.facebook.com/pages/Starcadian/192863837462944?ref=hl" target="_blank">
                  <i class="fa fa-facebook fa-4x">
                  </i>
                </a>
              </li>
              <li>
                <a href="http://twitter.com/SunsetBlood" target="_blank">
                  <i class="fa fa-twitter fa-4x">
                  </i>
                </a>
              </li>
              <li>
                <a href="http://vimeo.com/starcadian" target="_blank">
                  <i class="fa fa-vimeo-square fa-4x">
                  </i>
                </a>
              </li>
              <li>
                <a href="https://soundcloud.com/starcadian" target="_blank">
                  <i class="fa fa-music fa-4x">
                  </i>
                </a>
              </li>
            </ul>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;For general enquiries, please contact: 
              <a href="mailto:me@starcadian.com">
                me@starcadian.com
              </a>
            </p>
          </center>
          <a href="#" class="show_hide2 hide-button">
            HIDE
          </a>
        </div>
        <area shape='poly' coords='575, 26, 537, 105, 512, 163, 506, 171, 513, 175, 617, 174, 626, 191, 633, 194, 646, 194, 656, 192, 662, 186, 670, 172, 664, 159, 657, 151, 647, 148, 632, 147, 621, 121, 589, 49, 579, 28' href='#' class="show_hide3" />
        <div class="slidingDiv3">
          <p>
            <a href="http://www.facebook.com/pages/Starcadian/192863837462944?ref=hl" target="_blank">
              <img src="img/download.png" alt="Download Code Here" />
            </a>
          </li>
      </p>
      <ul>
        <li>
          <a href="http://itunes.apple.com/us/artist/starcadian/id481719231" target="_blank">
            <img src="img/itunes.png" alt="iTunes" />
          </a>
        </li>
        <li>
          <a href="http://open.spotify.com/artist/3I0ceM8qfqhCKGepaswmVg" target="_blank">
            <img src="img/spotify.png" alt="Spotify" />
          </a>
        </li>
        <li>
          <a href="http://starcadian.bandcamp.com/" target="_blank">
            <img src="img/bandcamp.png" alt="Bandcamp" />
          </a>
        </li>
      </ul>
      <a href="#" class="show_hide3 hide-button">
        HIDE
      </a>
</div>
</map>
</header>

jQuery

<script>
        $(document).ready(function() {  

            $(".slidingDiv").hide();
            $(".show_hide").show();
                $('.show_hide').click(function(){
                $(".slidingDiv").slideToggle();
            });

            $(".slidingDiv2").hide();
            $(".show_hide2").show();
                $('.show_hide2').click(function(){
                $(".slidingDiv2").slideToggle();
            });

                $(".slidingDiv3").hide();
            $(".show_hide3").show();
                $('.show_hide3').click(function(){
                $(".slidingDiv3").slideToggle();
            });
            // all jQuery code goes here  
        });
    </script>

**我不允许在这里发布CSS，所以我只是JsFiddle'd it here。

图像映射，CSS Sprites和jQuery显示隐藏的DIV

的 HTML

jQuery

0 个答案: