鼠标悬停 - 希望图像弹出鼠标悬停/鼠标悬停功能

Question

好的。。

我有这个网站：http://stephaniie.com/_testlab/beta1/

{ 完整的html代码：http://pastebin.com/u4HpxcB2 }

如果你向下滚动，在右边，塔旁边有一个骑士..

• 如果您将鼠标从他的右侧移动.. 将弹出一个更大的骑士图像。
• 如果您将鼠标移近他，动画就会开始，他开始“说话”

这是通过一些非常简单的编码完成的。

->

为了让骑士形象出现，使用了这个 CSS 和 Javascript：

原文来源：http://clba.nl/sitepoint/img-hover-demo-js1.htm

<style>
    #img2{
        position: absolute;
        top: 1400px;
        left: 50px;
        display: none;
     }
     #img1:hover + #img2 {display:block}
</style>

  <script>
  var img1 = document.getElementById("sol,
      img2 = document.getElementById("img2");

  img1.onmouseover = function(){
    img2.style.display = "block";
  }

  img1.onmouseout = function(){
    img2.style.display = "none";
  }
</script>

使用 PlaySound/StopSound Javascript 开始播放音乐。

原文来源：Javascript play sound on hover. stop and reset on hoveroff

   <script>
    function PlaySound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.play();
    }
    function StopSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.pause();
        thissound.currentTime = 0;
    }
    </script> 

问题：当我将 Knight 悬停时如何结合这两个功能？

对于网站上的 HTML，我使用“”和“”来制作图像地图。

代码是：

<map name="map12" id="img_id12">
    <area class="youtube" coords="1497,52,1588,128" shape="rect" href="http://www.youtube.com/embed/GPbUA6dCR8k" style="outline:none;"
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12.gif';" 
    onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif';"  />

    <area class="youtube" coords="3878,24,3957,96" shape="rect" href="https://www.youtube.com/embed/skV-q5KjrUA" style="outline:none;"
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
    onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');"  />
    <area id="sol" coords="3890,23,3970,100" shape="rect" style="outline:none;" />
</map> 

我唯一想要的就是在我的 代码中添加一个图像显示功能。 所以，

<img id="img2" src="solaire.gif" alt="" style="display: none;">

当“鼠标悬停功能”被激活时变成这个。

<img id="img2" src="solaire.gif" alt="" style="display: block;">

评论：正如您在上面的代码和网站上看到的那样，我可以使用图像悬停和播放/停止声音，但不能同时使用。有没有办法同时使用这两个脚本？如果您想知道 "onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif';" 的作用。它用于更改背景使用 ID 发送给另一个人。

<img src="assets/images/no-text/day/12.gif" usemap="#map12" id="img_id12" class="first" />

我尝试将此“图像显示/隐藏”脚本添加到地图区域代码中的“鼠标悬停”。像这样。

<area id="sol" class="youtube" ...
    onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
</area

这有效.. 但是 PlaySound/StopSound 不再有效。然而，彩盒和不断变化的图像仍然有效。所以问题是添加了显示/隐藏图像功能并且仍然有 PlaySound/StopSound 功能工作。

编辑和更多信息： 我还使用了两个名为 Colorbox 和 Responsive Image Map 的 Javascript 工具。 * Colorbox 是一个 jQuery 灯箱脚本。来源：http://www.jacklmoore.com/colorbox/ * 响应式图像映射允许图像映射随屏幕大小调整大小。来源：http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

在索引页面上使用它们的代码是这样的。

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
$(document).ready(function(){
    //Examples of how to assign the Colorbox event to elements
    $(".youtube").colorbox({iframe:true, innerWidth:1024, innerHeight:576});
});
/script>

可在此处找到响应式图像映射脚本和 Colorbox 的完整代码。

• 响应式图像映射脚本： - 链接 -> http://pastebin.com/699T5kLY

• 彩盒： - 链接 -> http://pastebin.com/Jj4SQEhu - 链接 -> http://pastebin.com/bErhvPFA

Answer 1

首先，您在这里的第一行似乎有语法错误，您可以直接从.onmouseover / .onmouseout 事件触发器中调用函数。

<script>
    var img1 = document.getElementById("sol"), //Fix syntax error
        img2 = document.getElementById("img2");

    img1.onmouseover = function(){
        img2.style.display = "block";
        PlaySound(); // Add call to function PlaySound()
    }

    img1.onmouseout = function(){
        img2.style.display = "none";
        StopSound(); // Add call to function StopSound()
    }
</script>

接下来，您似乎尝试更改<img> 元素的src 属性并同时调用Start-/StopSound() 函数。虽然这可能有效，但它会导致代码混乱。看到您在问题中如何标记jQuery，我假设您已将其包含在您的项目中，因此请尝试以下操作（替换上述内容）：

$('#sol').mouseenter(function() {
    $(this).css('display', 'block');
    $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
    PlaySound('solaire');
});
$('#sol').mouseleave(function() {
    $(this).css('display', 'none');
    $(this).attr('src', 'assets/images/no-text/day/12.gif');
    StopSound('solaire');
    PlaySound('solaire-stop');
});

---

以下基于我们的 cmets 在此答案下方向后“n”

---

问题 a 中给定站点的直接副本 var img1 = document.getElementById("sol"),

    img2 = document.getElementById("img2");

img1.onmouseover = function(){
    img2.style.display = "block"; if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire');
}

img1.onmouseout = function(){
    img2.style.display = "none"; if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif';

}

$('#sol').mouseenter(function() {
    $(this).css('display', 'block');
    $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
    PlaySound('solaire');
});
$('#sol').mouseleave(function() {
    $(this).css('display', 'none');
    $(this).attr('src', 'assets/images/no-text/day/12.gif');
    StopSound('solaire');
    PlaySound('solaire-stop');
});

将其更改为以下以更高效/DRY。将整个<script> ... </script> 内容替换为以下内容；）

var elementIds = [
    'sol',
    'img2'
];

elementIds.forEach(function(id) {
    var $element = $('#' + id);

    $element.mouseenter(function() {
        $(this).css('display', 'block');
        $(this).attr('src', 'assets/images/text/day/12solaire-ani.gif');
        PlaySound('solaire');
    });

    $element.mouseleave(function() {
        $(this).css('display', 'none');
        $(this).attr('src', 'assets/images/no-text/day/12.gif');
        StopSound('solaire');
        PlaySound('solaire-stop');
    });
});

但请注意，这并不完美。您可以尝试使用multidimensional object 进一步扩展此代码。然后，您可以在数据中获得数据，例如在显示时使用哪个图像 URL，在隐藏时使用哪个图像 URL，以及在隐藏/显示时播放/停止哪些音乐。

一个支持它的示例对象是：

var exampleObj = {
    sol: {
        show: {
            img: 'assets/images/text/day/12solaire-ani.gif',
            sound: 'solaire'
        },
        hide: {
            img: 'assets/images/no-text/day/12.gif',
            sound: 'solaire-stop'
        }
    },
    img2: {...},
    img3: {...}
};

使用上述示例对象的示例实现（您必须自己完成其内容和/或修改功能，只是为了让您了解如何操作）：

Object.keys(exampleObj).forEach(function (key, value) {
    var $element = $('#' + key);

    $element.mouseenter(function() {
        $(this).css('display', 'block');
        $(this).attr('src', value.show.img);
        PlaySound(value.show.sound);
    });

    $element.mouseleave(function() {
        $(this).css('display', 'none');
        $(this).attr('src', value.hide.img);
        StopSound(); // Modify the StopSound() function to stop any sound that's playing, regardless of what
        PlaySound(value.hide.sound);
    });
});

第二个注意 ;) 上面的所有代码都未经测试：|不好意思