Question

如何让更大的KNIGHT-IMAGE像其他图像一样响应？

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

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

如果您从右侧移动鼠标，则会显示更大的骑士图像。 “说话”开始和小像素骑士的文字+动画。
如果你移开鼠标，那么更大的KNIGHT-IMAGE消失了，他说“再见”，动画+文字就停止了。

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

对于更大的KNIGHT-IMAGE来显示/隐藏此CSS并使用JavaScript：

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

<style>
    #img2{
        position: absolute;
        top: 1600px;
        left: 100px;
        display: none;
        width: auto;
        height: auto;
     }
</style>

<script>
    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'; StopSound('solaire'); PlaySound('solaire-stop');
    }   
</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>

如何让更大的骑士图像像其他图像一样响应？如果您重新调整屏幕大小，您会发现所有图像都会改变大小，除了更大的骑士图像 - 当您将小型骑士放在塔旁边时，会出现这种情况。否则，脚本可以完美运行。

鼠标悬停=较大的骑士图像出现，动画/文字出现在骑士，声音开始。
Mouseout =更大的Knight-Image隐藏，动画/文字从Knight消失，声音停止，再见声音开始。

对于网站上的HTML，我使用<map>和<area>制作图片地图。

代码是：

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

<map name="map12" id="img_id12">
<area class="youtube" id="sol" href="https://www.youtube.com/embed/skV-q5KjrUA" coords="3890,23,3970,100" shape="rect" style="outline:none;" />
</map>

我唯一想要的就是让更大的骑士图像具有响应大小。

编辑和更多信息

我还使用了两个名为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的完整代码。

响应式图像映射脚本：

<script src="assets/js/jquery.rwdImageMaps.min.js"></script>

链接：http://pastebin.com/699T5kLY

彩盒：

<link rel="stylesheet" href="assets/colorbox-assets/colorbox.css" />                                        <!-- COLORBOX -->

链接：http://pastebin.com/Jj4SQEhu

    <script src="assets/colorbox-assets/jquery.colorbox.js"></script>

链接：http://pastebin.com/bErhvPFA

为什么所有图像都有响应大小？

编辑和更多信息

0 个答案: