JS: Получение идентификатора изображения с помощью onmouseover

0

У меня есть 4 изображения в моем документе, 1 наверху и три внизу внизу, что я хочу, когда я наводил курсор на любое из нижних 3 изображений, я получаю его идентификатор и заменяю вышеуказанное изображение этим изображением, используя onmouseover, например

 <script >
   function chanageimg(id)// here i want  to pass hovered image  src 
      {
          document.getElementById("top_image").src=id;

      }
   </script>

 <div id="top" >
   <img src="top.jpg"  id="top_image" />
 </div>

 //here is the  bottom image , 
<div class ="floats one">
  <img src="img1.jpg"  id="img1"  onmouseover="changeimg()" />
</div>     

как я могу передать его src в функцию aboce. Я не хочу использовать JQuery. здесь как его для цели обучения

  • 0
    OnMouseOver = "changeimg (this.id)"
  • 0
    и как это будет передаваться в вышеуказанном параметре?
Показать ещё 4 комментария

3 ответа

1
Лучший ответ

Одно небольшое изменение в вашем HTML:

<img src="img1.jpg"  id="img1"  onmouseover="changeimg(this.id)" />

this образ, this.id, и this.id - это параметр, который вы хотите передать своей функции.

1

Внутри функции changeimg (e) используйте e.target.id для получения идентификатора. Если вы это сделаете, вам не нужно добавлять this.id к каждому onmouseover="" в ваших изображениях. Просто используйте onmouseover="changeimg".

  • 0
    Нет. это окно == внутри функции changeimg () (как проводное). для этого вам нужно было бы назначить changeimg как обработчик событий (обратите внимание на одноразовый встроенный обработчик, который отправляет changeimg) ...
  • 0
    @dandavis Ты прав. Я имел в виду e.target.id .
1

Чтобы изменить изображение, вы должны изменить src

<img id="img-top"  src="">
<img src="img1.jpg" onmouseover="changeimg(this.src)">

function changeimg(src){
    document.getElementById("top_image").src = src;
}

ПРИМЕР

Ещё вопросы

Сообщество Overcoder
Наверх
Меню