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 code：

<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)
    });
});

这只会将第一个src的{{1}}属性更改为<img>上的其他属性，并将其还原为mouseenter。（这可以使用常规JS来完成，但JQuery更容易。您可以使用相同的逻辑）。

注意：此代码未经测试。如果我有错误，请发表评论。

此外，如果您想要超链接，只需在图像元素周围添加它们即可。例如：

mouseleave

请参阅this JSFiddle的示例（我试图尽可能地复制您的内容 - 抱歉低分辨率图片）。

鼠标悬停在图像上并改变另一个

1 个答案: