I'm working on a project that requires designing an HTML page with three tables containing images, along with a compare button. Initially, only two tables are visible upon page load, but when the user clicks the compare button, the third table should appear with three icons representing different levels of match: green for highly matched, blue for possible match, and red for no match.
I'm looking for guidance on how to incorporate these icons into my HTML page. Can this be achieved using jQuery or is there another method?
Any help would be greatly appreciated.
Below is the code snippet I'm currently using to compare fingerprint images:
<td><table style="width: 100%;"><tr>
<td style="width: 10%; text-align: center; border: none;"> Right Thumb </td>
<td style="width: 10%; text-align: center; border: none;"><span style="width: 50%; border: none;"><img src="img/RIGHT_THUMB.png" alt="right thumb" height="120"/></span></td>
<td><table style="width: 100%;"><tr>
<td style="width: 10%; text-align: center; border: none;"> Right Thumb </td>
<td style="width: 10%; text-align: center; border: none;"><span style="width: 50%; border: none;"><img src="img/RIGHT_THUMB.png" alt="right thumb" height="120"/></span></td>
<input type="button" value="compare"/>
Thank you in advance!