html - javascript how to zoom part of table cells area based on the selected cell -

html - javascript how to zoom part of table cells area based on the selected cell -

how zoom part of table construction based on selected cell,the element within table cell can ,for illustration can span text in cell a2 or image in cell c3 eg.

class="snippet-code-html lang-html prettyprint-override"><table border=1> <tr style="height:10pt;"> <td>a1</td> <td><span>a2</span></td><td>a3</td><td>a4</td><td>a5</td></tr> <tr style="height:1pt;"><td>b1</td> <td>b2</td><td>b3</td><td>b4</td><td>b5</td></tr> <tr style="height:12pt;"><td>c1</td> <td>c2</td><td><img src=c3/></td><td>c4</td><td>c5</td></tr> <tr style="height:12pt;"><td>d1</td> <td>d2</td><td>d3</td><td>d4</td><td>d5</td></tr> </table>

when user click on table cell ,i want show magnifier ,and can zoom table construction upper downwards left right 9 cells(the center cell 1 clicked). illustration if user click on b3,it shall show scaled table part include below cells in magnifier ,the shape of magnifier can rectangle :

class="snippet-code-html lang-html prettyprint-override"> <tr> <td><span>a2</span></td><td> a3</td><td> a4 </td></tr> <tr><td> b2</td> <td>b3</td><td> b4</td></tr> <tr> <td> c2 </td><td><img src=c3/></td><td> c4</td></tr>

javascript html html-table zooming