javascript - 鼠标悬停 - 想要使用鼠标悬停/鼠标移出功能弹出图像

Question

好的..

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

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

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

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

这是通过一些非常简单的编码实现的。

->

为了使 KNIGHT-IMAGE 出现，使用了这个 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> 

问题:小马悬停时如何将这两个功能结合起来？

对于网站上的 HTML，我使用“< map >”和“<区域>”来制作图像 map 。

代码是:

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

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

<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" />

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

<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/ * 响应式图像 map 允许图像 map 随屏幕尺寸调整大小。来源: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>

接下来，你似乎试图改变一个src <img> 的属性元素并同时调用 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');
});

---

下面根据我们在此答案下方的评论来回

---

直接从问题 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);
    });
});

第二个注意 ;) 以上所有代码都未经测试:|对不起