Mouse Over an Image and Change Another

This is more difficult that it needs to be to explain...

Essentially, I'm trying to make a mildly interactive website menu system in which hovering over a picture changes another picture, in HTML5. I perfected this with ActionScript 3 in Flash CC, so you can see what I'm trying to accomplish here. Attempting to convert the ActionScript canvas to HTML5 results in a loss of the actions I applied. I'm sure this is a fairly simple operation, building off of a simple 'change image from mouseover', as would be seen with a button or similar element. Here is the code I used in 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);
}

I have four images in the menu to be displayed, and four that would be hovered over.

This would be the code for simply one selection:

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

Additionally, I would like to add the ability to have hyperlinks for each of the selections (as it is a menu). Thanks!

Solution

Assuming that you have the image to change as tv.jpg, the images to hover over as work.jpg, team.jpg, and contact.jpg, and the altered-tv images to show when one of those three images are hovered over: 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 (with 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)
    });
});

This just changes the src attribute of the first <img> to a different one on mouseenter, and reverts it back on mouseleave. (This can be done with regular JS, but JQuery is easier. You can use the same logic).

Note: This code is untested. Please comment if I have errors.

Also, if you want hyperlinks, just add them around the image elements. For example:

<a href="[hyperlocation_url]"><img src="contact.jpg" class="image" data-src="tvContact.jpg" /></a>

See this JSFiddle for an example (I tried to replicate yours as best I could --- sorry for the low-res pictures).