點擊時突出圖像圖標

Question

我有3圖像作爲icons不同用途。

現在我想的是，

如果單擊第一個圖標，第一個圖標應該是highlighted，如果第二次被點擊第二個圖標應當highlighted。

請參閱您的文獻的HTML： -

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

也看到CSS： -

.para01 { 
     font-size: 16px; 
     margin-top: 6px; 
     font-weight: bold; 
     margin-top: 10px; 
    } 

請幫

Answer 1

難道像這樣

CSS

para01 { 
     font-size: 16px; 
     margin-top: 6px; 
     font-weight: bold; 
     /*line-height: 1.5em;*/ 
     margin-top: 10px; 
    } 

    .highlight { 
     background: yellow; 
    } 
    .imghighlight{ 
     height:50px; 
     width:50px; 
    } 

JQuery的： -

$(document).ready(function() { 
     $('input.hideChkbx').on('change', function() { 
      $('input.hideChkbx').not(this).prop('checked', false); 
      $('input.hideChkbx').not(this).parent().find("img").removeClass("imghighlight"); 
      $('input.hideChkbx').not(this).parent().find(".para01").removeClass("highlight"); 
      if ($(this).is(':checked')) { 
       $(this).parent().find("img").addClass("imghighlight"); 
       $(this).parent().find(".para01").addClass("highlight"); 
      } 
     }); 
    }); 

和它的工作

Answer 2

你最好的選擇應該是，使圖像到CSS精靈，並改變背景大小。如果這對你來說很難，你可以爲A標籤製作背景圖像。像這樣：

a { 
    background: url('image.png') no-repeat center center; 
} 
a.highlighted { 
    background-image: url('image-highlight.png'); 
}