У меня есть 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. здесь как его для цели обучения
Одно небольшое изменение в вашем HTML:
<img src="img1.jpg" id="img1" onmouseover="changeimg(this.id)" />
this
образ, this.id
, и this.id
- это параметр, который вы хотите передать своей функции.
Внутри функции changeimg (e) используйте e.target.id
для получения идентификатора. Если вы это сделаете, вам не нужно добавлять this.id к каждому onmouseover=""
в ваших изображениях. Просто используйте onmouseover="changeimg"
.
e.target.id
.
Чтобы изменить изображение, вы должны изменить src
<img id="img-top" src="">
<img src="img1.jpg" onmouseover="changeimg(this.src)">
function changeimg(src){
document.getElementById("top_image").src = src;
}