Отображение 2 разных изображений (альтернативное изображение для каждого изображения) при наведении курсора, используя одну функцию

Question

Я работал несколько часов, пытаясь завершить последнюю часть лаборатории.Мне нужно, чтобы на моей веб-странице отображались два файла изображений с разными именами, которые менялись, когда я наводил курсор на них с помощью функции.Когда я наводю курсор мыши на первое изображение, оно должно измениться на знак радиации, а когда я наведу курсор мыши на второе изображение, оно должно измениться на знак биологической опасности.Всякий раз, когда я убираю мышь с одного из изображений, это изображение должно снова превратиться в знак вопроса.Я думаю, что знаю, как использовать одну и ту же функцию для работы с несколькими обработчиками событий;проблема в том, что я не знаю, как использовать одну и ту же функцию для изменения изображения (при наведении мыши) на другое изображение, в зависимости от того, над каким изображением находится моя мышь;Я не знаю, как заставить функцию проверять, к какому изображению относится onmouseover.

Естественно, я бы предположил, что использовал бы для этого оператор if, но что бы я ни делал, я не могукажется, чтобы получить функцию, чтобы дифференцировать изображения.Кажется, всегда хочется использовать первое изображение, которое я перечислил.Прямо сейчас это работает точно так, как я хочу, за исключением того, что оба изображения меняются при наведении мыши на одно и то же.

Вот код, который я имею для страницы функций (вероятно, там, где проблемы):

function changePic_onmouseover()
{
 if(document.images[0].onmouseover)
 {
  this.src = "02-Radiation.jpg";
 }
 else if(document.images[1].onmouseover)
 {
  this.src = "03-Biohazard.jpg";
 }
}
function changePic_onmouseout()
{
 if(document.images[0].onmouseout)
 {
  this.src = "01-Question.jpg";
  return true;
 }
 else if(document.images[1].onmouseout)
 {
  this.src = "01-Question.jpg";
  return true;
 }

}

А вот сценарий тела, где я добавил обработчики событий со свойствами объекта:

document.images[0].onmouseover = changePic_onmouseover;
document.images[0].onmouseout = changePic_onmouseout;
document.images[1].onmouseover = changePic_onmouseover;
document.images[1].onmouseout = changePic_onmouseout;

Возможно, это не самый простой способ сделать это, но мне нужно, чтобы он был настроен так.

Answer 1

Что вы на самом деле делаете с этой строкой:

if(document.images[0].onmouseover)

- проверить, имеет ли свойство onmouseover значение, которое равно true. Поскольку вы назначили событие для него, оно всегда будет иметь значение true.

Вы хотите сравнить текущий элемент, чтобы определить, какой это:

if(document.images[0] == this)

Когда вы присваиваете события, вы знаете, какой это элемент, поэтому мне будет проще просто иметь отдельные функции для каждого события, чем пытаться выяснить во время события, какое изображение использовать:

document.images[0].onmouseover = function(){ this.src = '02-Radiation.jpg'; };
document.images[0].onmouseout = function(){ this.src = '01-Question.jpg'; };
document.images[1].onmouseover = function(){ this.src = '03-Biohazard.jpg'; };
document.images[1].onmouseout = function(){ this.src = '01-Question.jpg'; };

Answer 2

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

эта строка:

if(document.images[0].onmouseover)

просто проверяет, "если первое изображение в документе имеет указатель мыши какого-либо определенного вида" и не имеет ничего общего с выполняемой в данный момент функцией

, если вы хотите сказать, выполняется лиЭлемент вызывается, так как вы используете напрямую подключенные обработчики (в отличие от делегирования события), вы можете просто проверить «this»:

if(this == document.images[0])

или вы можете проверить на цели события, но этопотребовалась бы небольшая кроссоверская распутница ... что-то вроде этого сработало бы

function changePic_onmouseover(e) {
if(!e) e = window.event;
var target = e.target || e.srcElement;
if(target == document.images[0]) // do stuff

Answer 3

как насчет использования только css и свойства: hover для изменения фонового изображения?

example

вам действительно нужно использовать js для этого?=) Удачи