In HTML/CSS/JavaScript, how to display image beside a table upon hovering on a row.

1. Let's say at first there is a placeholder image beside the table and let say it's "placeholder.jpg".

2. When i hover over a row of the table, the image must change into "row1.jpg" but it must be of the same size. And the same when i hover my mouse over row 2 displaying "row2.jpg" and so on.

3. When my mouse exits the table, the latest image must remain.

4. This implementation can only use HTML, CSS & JavaScript. So JQuery is not allowed.

I would appreciate it i you'd drop a code snippet to solve this. Thank you.