鼠标在图像和改变的另一
这是比较困难的,它需要被解释......鼠标在图像和改变的另一
从本质上讲,我试图做一个温和的互动网站的菜单系统中,当鼠标悬停在图片另一个变化图片,在HTML5中。 I perfected this with ActionScript 3 in Flash CC, so you can see what I'm trying to accomplish here. 试图将ActionScript画布转换为HTML5会导致我应用的操作丢失。我确定这是一个相当简单的操作,它构建了一个简单的“鼠标悬停更改图像”,就像使用按钮或类似元素一样。下面是我在ActionScript使用的代码:
img1.visible=false;
img2.visible=false;
img3.visible=false;
img4.visible=false;
mClip1.addEventListener(MouseEvent.MOUSE_OVER, mOver2);
mClip1.addEventListener(MouseEvent.MOUSE_OUT, mOut2);
mClip2.addEventListener(MouseEvent.MOUSE_OVER, mOver);
mClip2.addEventListener(MouseEvent.MOUSE_OUT, mOut);
mClip3.addEventListener(MouseEvent.MOUSE_OVER, mOver3);
mClip3.addEventListener(MouseEvent.MOUSE_OUT, mOut3);
mClip4.addEventListener(MouseEvent.MOUSE_OVER, mOver4);
mClip4.addEventListener(MouseEvent.MOUSE_OUT, mOut4);
stop();
function mOver(e:MouseEvent):void {
img1.visible=true;
}
function mOut(e:MouseEvent):void {
img1.visible=false;
gotoAndStop(5);
}
function mOver2(e:MouseEvent):void {
img2.visible=true;
}
function mOut2(e:MouseEvent):void {
img2.visible=false;
gotoAndStop(10);
}
function mOver3(e:MouseEvent):void {
img3.visible=true;
}
function mOut3(e:MouseEvent):void {
img3.visible=false;
gotoAndStop(15);
}
function mOver4(e:MouseEvent):void {
img4.visible=true;
}
function mOut4(e:MouseEvent):void {
img4.visible=false;
gotoAndStop(20);
}
我在菜单四个图像进行显示,四是将鼠标悬停。
这将是代码简单一个选择:
img1.visible=false;
mClip.addEventListener(MouseEvent.MOUSE_OVER, mOver);
mClip.addEventListener(MouseEvent.MOUSE_OUT, mOut);
function mOver(e:MouseEvent):void {
img1.visible=true;
}
function mOut(e:MouseEvent):void {
img1.visible=false;
}
另外,我想补充有超链接为每个选择的(因为它是菜单)的能力。谢谢!
假设你必须改变为tv.jpg
图像,图像悬停在为work.jpg
,team.jpg
,并contact.jpg
,当这三个图像之一上空盘旋改变电视图像显示:tvWork.jpg
,tvTeam.jpg
, tvContact.jpg
:
HTML代码:
<img src="tv.jpg" id="toChange" />
<img src="work.jpg" class="image" data-src="tvWork.jpg" /> // data-attribute is used to store custom data, such as source
<img src="team.jpg" class="image" data-src="tvTeam.jpg" />
<img src="contact.jpg" class="image" data-src="tvContact.jpg" />
的JavaScript(用jQuery):
$(".image").each(function() {
$(this).hover(function() { // this is the mouseenter event handler
$("#toChange").attr("src", $(this).attr("data-src"));
}, function() { // this is the mouseleave event handler
$("#toChange").attr("src", "tv.jpg"); // this will revert it back to the original image (tv.jpg)
});
});
这只是将第一个<img>
的src
属性更改为mouseenter
上的另一个属性,并将其恢复回mouseleave
。 (这可以用普通的JS完成,但JQuery更容易,你可以使用相同的逻辑)。
注意:此代码未经测试。请评论,如果我有错误。
此外,如果您想要超链接,只需将它们添加到图像元素周围。例如:
<a href="[hyperlocation_url]"><img src="contact.jpg" class="image" data-src="tvContact.jpg" /></a>
见this的jsfiddle为例(我试图复制你的一样尽我所能---遗憾的低分辨率照片)。
好吧,对不起,我一直在追赶一些学校的工作。至于你的回答......我想我需要澄清我的问题。当鼠标悬停在图像上方时,我需要将鼠标悬停在图像上,而不是鼠标移动到另一只图像上。我有一个菜单,有四个图标。将鼠标悬停在图标上应该将电视屏幕更改为左侧,该屏幕会显示链接的路径。再次,我有我的ActionScript示例[在我的网站上](http://www.kleinco.org/)。感谢您的帮助,仍然。 – user3571446
@ user3571446还为您的观看乐趣添加了一个JSFiddle链接 - 它的作品! –
好的,我打算继续尝试一下。如果一切顺利(我认为它会的),我会告诉你,我会接受答案。非常感谢你的帮助! – user3571446
如果你只是改变图像的“src”属性(用JS),这将消除设置两个不同图像可见性的麻烦。如果你使用JQuery,改变属性并添加监听器会更容易。 –
你的意思是你想在* Javascript *而不是HTML5中做到这一点? JavaScript是脚本部分... –
我的回答有帮助吗?如果有,请接受它。如果它不为什么不呢? –