ImageRollovers Example

ImageRollovers Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- ImageRollovers Example 
Source code file: index.htm 
Change image when mouse enters image
and change back to original when
mouse leaves. Change border of image
to red when clicked. -->

<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>ImageRollovers Example</h1>
        <p>Move mouse cursor into image to change image displayed.<br>
        Click on image to change border color to red.</p>
        <img id="1"><img id="2"><img id="3"><img id="4">
    </body>
</html>

CSS Page -- styles.htm

 /* ImageRollovers Example
   Source code file: styles.css
   Change image when mouse enters image
   and change back to original when
   mouse leaves. Change border of image
   to red when clicked. */ 

* { font-family: Helvetica, Arial, sans-serif;
    background-color: #E0E0FF; }|

img { width: 100px; height: 100px; 
      margin: 15px; border-width: 10px; 
      border-color: blue; border-style: solid; }

Script Page -- script.js

 // ImageRollovers Example
// Source code file: script.js
// Change image when mouse enters image
// and change back to original when
// mouse leaves. Change border of image
// to red when clicked.

function init( ) {
    for(var i = 1; i <= 4; i++) {
        var image = document.getElementById(i.valueOf( ));
            image.src = "images/" + i + ".png";
        image.addEventListener(
            "mouseenter", onMouseEnterEventHandler);
        image.addEventListener(
            "mouseleave", onMouseLeaveEventHandler);
        image.addEventListener(
            "click", onClickEventHandler);
    }
}

function onMouseEnterEventHandler(e) {
    var id = e.target.id;
    e.target.src = "images/" + id + "b.png";
}

function onMouseLeaveEventHandler(e) {
    var id = e.target.id;
    e.target.src = "images/" + id + ".png";
}

function onClickEventHandler(e) {
    e.target.style.borderColor = "red";
}

window.addEventListener("load", init);