JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://img2.wikia.nocookie.net/__cb20110425235151/cfire/de/images/thumb/9/90/M4a1.jpg/352px-M4a1.jpg" id="pic-M4A1" style="display: none;" />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Heckler_%26_Koch_MP5-2.jpg/300px-Heckler_%26_Koch_MP5-2.jpg" id="pic-MP5K" style="display: none;" />
<table width="500" border="1" cellspacing="0">
    <caption>Maschinenpistolen (Hauptwaffen)</caption>
    <tr>
        <th width="90" scope="col">&nbsp;</th>
        <th width="40" scope="col">Schaden</th>
        <th width="47" scope="col">Rückstoß</th>
        <th width="50" scope="col">Feuerrate</th>
        <th width="45" scope="col">Präzision</th>
        <th width="44" scope="col">Magazin</th>
        <th width="33" scope="col">Preis</th>
        <th width="45" scope="col">Effizienz Schaden</th>
        <th width="58" scope="col">Effizienz Accuracy</th>
    </tr>
    <tr onmouseover="showPic('M4A1');" onmouseout="closePic('M4A1');">
        <th align="left" scope="row">M4A1</th>
        <td bgcolor="#F8080C">44</td>
        <td>54</td>
        <td bgcolor="#DCB902">99</td>
        <td>76</td>
        <td bgcolor="#F8080C">20 / 10</td>
        <td>14.000</td>
        <td bgcolor="#9E8507">143</td>
        <td>22</td>
    </tr>
    <tr onmouseover="showPic('MP5K');" onmouseout="closePic('MP5K');">
        <th align="left" scope="row">MP5K</th>
        <td>48</td>
        <td bgcolor="#F8080C">66</td>
        <td>91</td>
        <td>70</td>
        <td>30 / 120</td>
        <td bgcolor="#067804">13.000</td>
        <td>139</td>
        <td bgcolor="#067804">4</td>
    </tr>
</table>

JavaScript

window.showPic = function(id)
{
    document.getElementById('pic-'+id).style.display='block';
}
window.closePic = function (id)
{
    document.getElementById('pic-'+id).style.display='none';
}