Mouseover -想要弹出带有mouseover/mouseout功能的图像
好的..。
我有一个网站：testlab/beta1 1/
{完整的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>对于要开始播放的音乐，使用的是“播放声音/停止声音Javascript”。
资料来源：Javascript在悬停时播放声音。停止并在悬停时复位
<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 >“和"< area >”来生成图像地图。
守则是：
<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=‘资产/图像/文本/日/12索莱尔-ani.gif’会做什么。
<img src="assets/images/no-text/day/12.gif" usemap="#map12" id="img_id12" class="first" />我试图将这个“图像显示/隐藏”脚本添加到地图区域代码中的"mouseover“中。就像这样。
<area id="sol" class="youtube" ...
onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
</area这很管用..。然而，播放声音/停止音不再工作了。然而，彩色盒和改变的图像仍然有效。因此，问题是添加出现/隐藏图像功能，但仍然有播放声音/停止声音功能工作。
编辑和更多信息：，Im也使用两个Javascript工具，称为Colorbox和Responsive。* Colorbox是一个jQuery lightbox脚本。来源：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>这里可以找到响应型图像地图脚本和颜色盒的完整代码。
- 响应图像地图脚本：-链接-> http://pastebin.com/699T5kLY
- 彩色盒：- Link -> http://pastebin.com/Jj4SQEhu - Link -> http://pastebin.com/bErhvPFA
回答 1
Stack Overflow用户
发布于 2017-03-07 15:42:21
首先，这里的第一行似乎有语法错误，可以直接从.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>元素的一个<img>属性，并同时调用Start-/Start()函数。虽然这可能有效，但它会造成混乱的代码。考虑到您是如何在问题中标记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');
});
以下是我们的评论，如下所示
从给定站点直接复制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');
});将其更改为下面的代码，使之更高效/干的。)用下面的内容替换整个<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');
});
});不过，请注意，这并不完美。您可以使用多维对象进一步扩展此代码。在这些数据中，您可以得到数据，例如显示时要使用的图像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);
});
});第二，注意到 ;)上面的所有代码都没有经过测试：
https://stackoverflow.com/questions/42651498
复制相似问题
腾讯云开发者
