html - highlight the image icon when clicked on it -
i have 3 images icons
different use.
now want is,
if first icon clicked, first icon should
highlighted
, if second clicked second icon shouldhighlighted
.
please see html ref:-
<tr> <td width="18%" height="40" align="left" valign="middle"></td> <td style="text-align: left; vertical-align: middle;" width="6%"> <input type="checkbox" id="branchchkbx" title="branch" checked="checked" class="hidechkbx" /> <a href="locatebranches_rbl_view.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;"> <img alt="branch" src="images/branch_icon.png" height="40" width="40" title="branch" style="border: 0;" /> <p class="para01">branch</p> </a> </td> <td style="text-align: left; vertical-align: middle;" width="5%"> <input type="checkbox" id="atmchkbx" title="atm" checked="checked" class="hidechkbx" /> <a href="locateatm_rbl.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;"> <img alt="atm" src="images/atm_icon.png" height="40" width="40" title="atm" style="border: 0;" /><p class="para01">atm</p> </a> </td> <td style="text-align: left; vertical-align: middle;" width="6%"> <input type="checkbox" id="lockerchkbx" title="locker" checked="checked" class="hidechkbx" /> <a href="locatelockers_rbl.aspx" style="color: #666; font-family: 'signika_negativeregular', sans-serif;"> <img alt="locker" src="images/locker_icon.png" height="40" width="40" title="locker" style="border: 0;" /><p class="para01">locker</p> </a> </td> <td width="6%" height="40" align="left" valign="middle" style="border-left: 1px solid #cccccc;"> <a id="a1" href="default.aspx" runat="server" style="float: left; text-decoration: underline; color: #666; margin-left: 12px; font-family: 'signika_negativeregular', sans-serif;"> <p class="para01">view all</p> </a> </td> </tr>
also see css:-
.para01 { font-size: 16px; margin-top: 6px; font-weight: bold; margin-top: 10px; }
please help
your best option should make images css sprite, , change background-sizes. if that's hard you, can make images background of tag. so:
a { background: url('image.png') no-repeat center center; } a.highlighted { background-image: url('image-highlight.png'); }
Comments
Post a Comment