onmouseover - pass alt tag with image tag

Question

I've got the following code that is viewed as thumbnail images beside the big preview image.

<img onmouseover="getElementById('preview').src=(this.src)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="getElementById('preview').src=(this.src)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="getElementById('preview').src=(this.src)" src="images/3.jpg" alt="TESTING 3">

Then I've got my preview image...

<div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div>

When hovering over the thumbnail, it updates the preview. I'd like to pass the alt attribute to the preview.

---

I've tried this...

<img onmouseover="getElementById('preview').src=(this.src).setAttribute('alt',this.alt)" src="images/1.jpg" alt="TESTING 1">

and this...

<img onmouseover="getElementById('preview').src=(this.src).alt(this.alt)" src="images/1.jpg" alt="TESTING 1">

neither of which worked. I'm not the best at coming up with my own javascript but I'm obviously doing something wrong

Answer 1

You will allways have better results if yopu take your js into another function.

I created the changePreview function for you.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

 function changePreview(thumb){ var preview = document.getElementById('preview') var title = document.getElementById('pre-title') preview.src=(thumb.src); preview.alt=(thumb.alt); title.innerHTML = preview.alt; console.log('New alt: '+preview.alt); }

 <img onmouseover="changePreview(this)" src="images/1.jpg" alt="TESTING 1"> <img onmouseover="changePreview(this)" src="images/2.jpg" alt="TESTING 2"> <img onmouseover="changePreview(this)" src="images/3.jpg" alt="TESTING 3"> <div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div> <p id="pre-title"></p>

Answer 2

To achieve expected result, use below option

Option-1: Add assigning alt with semi colon separated

<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="getElementById('preview').src=(this.src);getElementById('preview').alt=(this.alt)" src="images/3.jpg" alt="TESTING 3">

code sample - https://codepen.io/nagasai/pen/GQVZxL?editors=1010

Option2: Using onmouseover event function

<img onmouseover="preview(this)" src="images/1.jpg" alt="TESTING 1">
<img onmouseover="preview(this)" src="images/2.jpg" alt="TESTING 2">
<img onmouseover="preview(this)" src="images/3.jpg" alt="TESTING 3">

<div class="preview" align="center"><img id="preview" src="images/1.jpg" alt="TESTING 1" /></div>

JS:

function preview(e){
   document.getElementById('preview').alt = e.alt;
   document.getElementById('preview').src = e.src;
}

Code sample - https://codepen.io/nagasai/pen/OQKNZK?editors=1010