Mouseover Image Generator

4119 views javascript

So I'm stuck here, I have an HTML page and I need it to show a random face out of the 4 to whenever the browser window loads and anytime the mouse goes over the image. It also needs to be unobtrusive. Exactly how would I go about doing that?

I created the HTML page and JS where I put all images in an array but not sure how to go further. I know I need to do a mouseover event but not sure how to put it in JS unobtrusively


<!doctype html>
<html lang="en">
  <title> Random Generator </title>
  <meta charset="utf-8">
  <!-- add in the prototype library -->
  <script src="PicGenerator.js"></script>
    div {
      width: 50%;
      margin: auto;
      text-align: center;
      font-family: sans-serif;
    img { width: 300px; }
  <h1>  Fernandel Faces </h1>
  <p> <img id="myImg"> </p>
  <img src="face1.png" alt="face">
  <p> Ask a question! </p>
  <p> Move Mouse Over Fernandel for a Response </p>


function randomImg() {

  // Create arrays of images
  var MultipleImages = new Array();

  //add images to array
  MultipleImages[1] = "Images/face1.png";
  MultipleImages[2] = "Images/face2.png";
  MultipleImages[3] = "Images/face3.png";
  MultipleImages[4] = "Images/face4.png";


answered question

1 Answer


Do this:

<img id="myImg" onmouseover="randomImg()">

Or if it's the other image:

<img src="face1.png" alt="face" onmouseover="randomImg()">

You just put this line of code as an attribute into the HTML:


posted this

Have an answer?


Please login first before posting an answer.