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

Question

这个比较难解释...

本质上，我正在尝试制作一个适度交互的网站菜单系统，其中将鼠标悬停在一张图片上会更改另一张图片，在 HTML5 中。 I perfected this with ActionScript 3 in Flash CC, so you can see what I'm trying to accomplish here. 尝试将 ActionScript canvas 转换为 HTML5 会导致我应用的操作丢失。我确信这是一个相当简单的操作，建立在一个简单的 'change image from mouseover' 之上，就像使用按钮或类似元素所看到的那样。这是我在 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，以及 altered-tv将这三张图片之一悬停时显示的图片：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 示例（我已尽我所能复制您的 --- 抱歉图片分辨率较低）。

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

Mouse Over an Image and Change Another

html

hover

adobe

flash-cc