Question

好的..

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

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

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

如果你从右侧移动鼠标......会弹出更大的骑士形象。
如果你将鼠标移近他，则动画开始，他开始“说话”

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

- ＆GT;

为了显示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，我使用“＆lt; map＆gt;”和“＆lt; area＆gt;”制作图像地图。

代码是：

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

我唯一想要的是在我的＆lt;“area”＆gt;中添加图像显示功能。码。所以，

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

当“鼠标悬停功能”被激活时，

变为此。

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

评论：正如您在网站上方和网站上看到的那样，我可以使用图像悬停和播放/ stopound但不能同时使用。有没有办法同时使用这两个脚本？如果你想知道什么是“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不再起作用。然而，Colorbox和更改图像仍然有效。所以问题是添加了出现/隐藏图像功能，并且仍然可以使用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

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

<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的完整代码。

响应式图像映射脚本： - 链接 - ＆gt; http://pastebin.com/699T5kLY
彩盒： - 链接 - ＆gt; http://pastebin.com/Jj4SQEhu - 链接 - ＆gt; 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');
});

<小时/> 以下基于我们在本答案下面的评论

问题中的给定网站的直接副本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以及隐藏时，与隐藏/显示时播放/停止的音乐相同的数据。

支持它的示例对象是：

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);
    });
});

第二次注意 ;;）上面的所有代码都是未经测试的：| sry bout那个

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

1 个答案:

问题中的给定网站的直接副本var img1 = document.getElementById（“sol”），