鼠标在图像和改变的另一

Question

这是比较困难的，它需要被解释......

从本质上讲，我试图做一个温和的互动网站的菜单系统中，当鼠标悬停在图片另一个变化图片，在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; 
} 

另外，我想补充有超链接为每个选择的（因为它是菜单）的能力。谢谢！

Answer 1

假设你必须改变为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为例（我试图复制你的一样尽我所能---遗憾的低分辨率照片）。