0

所以我尝试使用图像映射、CSS Sprites 和 jQuery 来构建网站的这一部分。想象一个具有 3 个映射点（第一个字母、中间字母和最后一个字母）的徽标（图像）。图像上的每个映射区域都有一个 # 的 href，当单击每个映射区域时，jQuery 会显示一个隐藏的 div。直到这部分我准备好了。

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

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

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

让我知道是否需要更多说明。提前致谢

这是我正在做的事情。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 在这里。

4

0 回答 0