Javascript 为什么除了一个图像外，所有图像都有响应大小？

我怎样才能使更大的骑士形象像其他形象一样有反应

我有这个网站：

完整html代码：

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

• 如果你把鼠标从他的右边移开。。一个更大的骑士形象出现了。“说话”开始，小像素骑士的文字+动画

• 如果你移动鼠标，更大的骑士形象消失，他说“再见”，动画+文字停止

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

要使更大的KNIGHT-IMAGE显示/隐藏此CSS和JavaScript，请使用：

原始资料来源：

#img2{
位置：绝对位置；
顶部：1600px；
左：100px；
显示：无；
宽度：自动；
高度：自动；
}
var img1=document.getElementById（“sol”），
img2=document.getElementById（“img2”）；
img1.onmouseover=函数（）{
img2.style.display=“块”；
if（document.images）document.getElementById（'img_id12'）.src='assets/images/text/day/12solaire ani.gif'；PlaySound（'solaire'）；
}
img1.onmouseout=函数（）{
img2.style.display=“无”；
if（document.images）document.getElementById（'img_id12'）.src='assets/images/no text/day/12.gif'；StopSound（'solaire'）；PlaySound（'solaire-stop'）；
}   

对于要开始播放的音乐，使用了PlaySound/StopSound JavaScript

原始资料来源：

功能播放声音（soundobj）{
var thissound=document.getElementById（soundobj）；
这个声音。play（）；
}
停止声音功能（soundobj）{
var thissound=document.getElementById（soundobj）；
这个声音。暂停（）；
thissound.currentTime=0；
}

我怎样才能使更大的骑士形象像其他形象一样有反应？如果你重新调整屏幕的大小，你会注意到所有的图像都会改变大小，除了更大的骑士图像-当你将位于塔旁边的较小骑士悬停时会出现。否则，脚本就可以完美地工作

• Mouseover=出现更大的骑士图像，骑士上出现动画/文本，声音开始
• Mouseout=更大的骑士图像隐藏，动画/文本从骑士消失，声音停止，再见声音开始

对于网站上的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>


$（文档）.ready（函数（e）{
$（'img[usemap]'）。rwdImageMaps（）；
});
$（文档）.ready（函数（）{
//如何将Colorbox事件指定给元素的示例
$（“.youtube”）.colorbox（{iframe:true，innerWidth:1024，innerHeight:576}）；
});
/脚本>

在这里可以找到响应图像映射脚本和颜色框的完整代码

响应图像映射脚本：

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



链接：

配色箱：

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



链接：



链接：
你的骑士形象在哪里？你能截图告诉我们它在哪里吗？它的老线索：）-我几个月前就完成了这个项目！我讨厌人们编辑旧线程。最终的结果是：骑士也在那里=）@KevinJantzer：在这里编辑旧线程是很正常的。在我看来，它有三个目的：它使一个老问题更容易回答，它使一篇文章更易读，让将来可能从中学习的人更容易阅读，它向原始海报展示了我们希望在这里做出的改进。如果必要的话，我会很高兴地编辑几年前的东西-如果某个东西是关于主题的，那么进行一些维护是一件好事
：-）
。
<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>

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

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

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