Implémentation de mouseover/mouseout pour de nombreuses images dans un fichier JavaScript externe

Question

J'essaie d'activer onMouseOver et onMouseOut pour toutes mes icônes et de les remplacer par des icônes uniques.

A l'origine j'avais ceci:

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

fichier externe JS:

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

Il y a quelques problèmes avec ceci:

1. Cette méthode fonctionne sur IE mais pour certains raison sur Chrome onMouseOut ne fonctionne pas, donc les images de survol sont restantes.

2. Nécessite un javascript en ligne. J'essaie d'avancer vers l'élimination de tous les JS en ligne.

3. Nécessite que je code en dur les chemins de l'image pour chaque image de la page.

Comme tous les chemins d'image sont les mêmes et suivent la même convention de dénomination, qui est juste

'images/ImageID.png' ou 'images/ImageID_Hover.png'

J'espérais mettre en œuvre quelque chose comme ceci:

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

Je veux passer l'ID de l'élément d'image à l'mouseOver et les fonctions mouseOut en tant que paramètre, utilisez que la chaîne d'ID littérale dans le chemin de l'image donc je ne pas à hardcod Le chemin de chaque image. Est-ce que quelque chose comme ça est possible? Y at-il un moyen de le faire sans JS en ligne?

J'ai envisagé d'utiliser le contenu: hover sans JS mais il n'est pas supporté par IE.

Answer 1

Je donnerais à toutes les images que vous voulez avoir l'effet de hover un nom de classe spécifique. Ensuite, vous pouvez obtenir tout l'élément avec cette classe et ajouter des écouteurs d'événement pour le survol et le passage du curseur. J'ai utilisé le src actuel pour déterminer le nouveau src. Vous pouvez tout aussi bien obtenir l'id avec event.target.id et l'utiliser pour construire le src. Vous pouvez également créer l'expression régulière pour correspondre à plus que des fichiers .png.

(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">