Реализация mouseover/mouseout для многих изображений во внешнем файле JavaScript

Я пытаюсь включить onMouseOver и onMouseOut для всех своих значков и заменить их уникальными значками.

Изначально у меня было так:

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

Внешний JS-файл:

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

Есть несколько проблем с этим:

  1. Этот метод работает в IE, но по какой-то причине в Chrome onMouseOut не работает, поэтому изображения при наведении остаются.

  2. Требуется некоторый встроенный javascript. Я пытаюсь перейти к устранению всех встроенных JS.

  3. Требует, чтобы я жестко кодировал пути к изображениям для каждого изображения на странице.

Поскольку все пути к изображениям одинаковы и следуют одному и тому же соглашению об именах, которое просто

'images/ImageID.png' или 'images/ImageID_Hover.png'

Я надеялся реализовать что-то вроде этого:

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

Я хочу передать идентификатор элемента изображения функциям mouseOver и mouseOut в качестве параметра, а затем использовать строковый литерал этого идентификатора в пути к изображению, поэтому мне не нужно жестко кодировать путь к каждому изображению. Возможно ли что-то подобное? Есть ли способ сделать это без встроенного JS?

Я рассматривал возможность использования content:hover без JS, но он не поддерживается в IE.


javascript image html onmouseover onmouseout
person moozin    schedule 30.06.2017    source источник
comment
Передача «этого» в функцию в вашем объявлении html, например «onMouseOver=mouseOver(this)», затем наличие функции mouseOver(img){} даст вам доступ к этой информации img, и вы сможете получить доступ к идентификатору. Вы также можете использовать некоторый JQuery и назначить класс для вашего img и выполнить $('.img-class').each(function(){затем привязать события мыши и мыши к каждому отдельному элементу img} (или вы можете просто сделайте $('img') без назначения класса, если хотите).   -  person Tyler Dahle    schedule 01.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я бы дал всем изображениям, которые вы хотите иметь эффект наведения, определенное имя класса. Затем вы можете получить весь элемент с этим классом и добавить прослушиватели событий для mouseover и mouseout. Я использовал текущий src для определения нового src. Вы можете так же легко получить идентификатор с помощью event.target.id и использовать его для создания src. Вы также можете создать регулярное выражение для соответствия не только файлам .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">

person Russell    schedule 01.07.2017
comment
Это именно то, что я ищу, но единственная проблема заключается в том, что функция самовызова, похоже, не работает. Мне все еще нужно вызывать встроенные функции mouseover и mouseout. Я мог упустить что-то очевидное - person moozin; 10.07.2017
comment
Я присвоил class=hoverImage каждому изображению - person moozin; 10.07.2017
comment
@moozin Если вы используете функцию автоматического вызова, как показано выше, вы должны убедиться, что ваш javascript загружается после html. Поэтому, если вы включаете файл javascript в голову, а не после тела, тогда getElementsByClassName не вернет список классов, который вам нужен, потому что теги img в этот момент не существуют. - person Russell; 11.07.2017
comment
Это было именно так. Спасибо за помощь. - person moozin; 11.07.2017
comment
Что вы думаете о замене: newPath = path.replace('.png', '_Hover.png'); на newPath = path.replace('.', '_Hover.' ); Таким образом, это не ограничивается только файлами .png. Конечно, тогда и изображение по умолчанию, и изображение при наведении должны иметь один и тот же тип файла. - person moozin; 25.07.2017
comment
@moozin Это сработает, но вам нужно будет сократить его до имени файла, иначе вы замените '.' в вашем домене и любой в строке запроса. stackoverflow.com/questions/29182283 / После того, как вы вытащите имя изображения, вам нужно будет проверить строку запроса, если вы используете ее как часть очистки кеша. - person Russell; 26.07.2017