Question

I need to create a html page where I have three tables with images, and one button compare, on page load only two tables will be displayed, when the user clicks compare button then the third table should appear with three icons

Green : Highly Match
blue: Possible Match
red: No match

How do I include these icons in my html page, Can I do this using jquery? or any other way?

Please help me.

here is the code, here I am comparing finger prints

<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"/>

Thanks in advance.

Answer 1

Use jquery or javascript. First make that icons & table visibility false and then make them appear on compare button’s click event. Or u can add that button dynamically using jquery or javascript.