Implementing mouseover/mouseout for many images in an external JavaScript file

Question

I'm trying to enable onMouseOver and onMouseOut for all of my icons and replacing them with unique icons.

Originally I had this:

<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver()" onMouseOut="mouseOut()">

External JS file:

function mouseOver() { document.getElementById("EEProfile").src = 'images/EEProfile_Hover.png'; }
function mouseOut() { document.getElementById("EEProfile").src = 'images/EEProfile.png'; }

There are a few issues with this:

1. This method works on IE but for some reason on Chrome onMouseOut isn't working, so hover images are remaining.

2. Requires some inline javascript. I'm trying to move towards eliminating all inline JS.

3. Requires me to hardcode image paths for each and every image on the page.

Since all image paths are the same and follow the same naming convention, which is just

'images/ImageID.png' or 'images/ImageID_Hover.png'

I was hoping to implement something like this:

Pseudocode HTML:

<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver(this.id)" OnMouseOut="mouseOut(this.id)">

Pseudocode JavaScript:

function mouseOver(id) { document.getElementById("id").src = 'images/id.png'; }
function mouseOut(id) { document.getElementById("id").src = 'images/id_Hover.png'; }

I want to pass over the ID of the image element to the mouseOver and mouseOut functions as a parameter, then use that ID's string literal in the image path so I don't have to hardcode every image's path. Is something like this possible? Is there a way to do this without inline JS?

I've considered using content:hover without JS but it isn't supported in IE.

Answer 1

I would give all the images you want to have the hover effect a specific class name. Then you can get all the element with that class and add event listeners for mouseover and mouseout. I used the current src to determine the new src. You could just as easily get the id with event.target.id and use that to build the src. You also could build the regular expression to match more than just .png files.

(function(window, document, undefined)
{
  var images = document.getElementsByClassName('hoverImage');
  for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseover', imageMouseOver, false);
    images[i].addEventListener('mouseout', imageMouseOut, false);
  }
})(window, window.document);


function imageMouseOver(event)
{
    event = event || window.event;

    var image = event.target;
    image.src = getNewImagePath(image.src);
    console.log(image);
}

function imageMouseOut(event)
{
  event = event || window.event;

  var image = event.target;
  image.src = getNewImagePath(image.src);
  console.log(image);
}

function getNewImagePath(path)
{
  var newPath;
  if (path.indexOf('_Hover') === -1) {
    newPath = path.replace('.png', '_Hover.png');
  } else {
    newPath = path.replace('_Hover', '');
  }
  
  return newPath;
}

.hoverImage {
  width: 50px;
  height: 50px;
}

<img id="1" src="images/1.png" alt="Employee Profile" class="hoverImage">
<img id="2" src="images/2.png" alt="Employee Profile" class="hoverImage">
<img id="3" src="images/3.png" alt="Employee Profile" class="hoverImage">