Mouseover Image Generator

4096 views javascript
3

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

HTML + CSS:

<!doctype html>
<html lang="en">
<head>
  <title> Random Generator </title>
  <meta charset="utf-8">
  <!-- add in the prototype library -->
  <script src="PicGenerator.js"></script>
  <style>
    div {
      width: 50%;
      margin: auto;
      text-align: center;
      font-family: sans-serif;
    }
    img { width: 300px; }
  </style>
</head>
<body>
  <div>
  <h1>  Fernandel Faces </h1>
  <img
  <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>
  </div>
</body>
</html>

JS:

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

5

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:

onmouseover="randomImg()"

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories