How to change Opacity of Credit Card Image when we enter Credit Card Number

Sometimes, our requirement is different rather than other like you want to change the opacity of Credit Card Image when we enter Credit Card Number in textbox or any other html controls. I have mentioned the steps below for changing the opacity of credit card image.

Step 1:- First of all download this JavaScript code and put into /app/design/frontend/packagename/themename/template/payment/form/cc.phtml

<script language="Javascript" type="text/Javascript">
        Function changeOpacityImageValidation (creditnumber)	
	{
		var j = new String;
		j = creditnumber;
		var i = new String;
		i = creditnumber;
		var a = j.substring(0,1);
		var b = i.substring(0,2);
		var cc = (creditnumber + '').replace(/\s/g, '');	//Remove extra space

                // This code for American Express Credit Card
		if (((/^3[47][0-9]{13}$/).test(cc) && cc.length == 15) || a==3) 
		{
			if(b==30 || b==36 || b==38 || b==35)
			{
			// This code is used for Hiding Images
			document.getElementById ("visa").className = 'cardimageopacity';
			document.getElementById ("master").className = 'cardimageopacity';
			document.getElementById ("american").className = 'cardimageopacity';
			}
			else
			{
			// This code is specifying the Type of Credit Card means American Express Card
			document.getElementById ("authorizenet_cc_type").value='AE';
			document.getElementById ("american").className = 'cardnoimageopacity';
			document.getElementById ("visa").className = 'cardimageopacity';
			document.getElementById ("master").className = 'cardimageopacity';
			}	
		}
		// This is for Master Card 
		else if (((/^5[1-5][0-9]{14}$/).test(cc) && cc.length == 16) || a==5) 
		{
			if(b==50 || b==56)
			{
			document.getElementById ("visa").className = 'cardimageopacity';
			document.getElementById ("master").className = 'cardimageopacity';
			document.getElementById ("american").className = 'cardimageopacity';
			}
			Else
                        {
                        // This code is specifying the Type of Credit Card means Master Card
			document.getElementById ("authorizenet_cc_type").value='MC';
			document.getElementById ("master").className = 'cardnoimageopacity';
			document.getElementById ("visa").className = 'cardimageopacity';
			document.getElementById ("american").className = 'cardimageopacity';	
			}
                }
		// This code for Visa Credit Card
		else if (((/^4[0-9]{12}([0-9]{3})?$/).test(cc) && (cc.length == 13 || cc.length == 16)) || a==4) 
		{
		// This code is specifying the Type of Credit Card means Visa Card
		document.getElementById ("authorizenet_cc_type").value='VI';
		document.getElementById ("visa").className = 'cardnoimageopacity';
		document.getElementById ("master").className = 'cardimageopacity';
		document.getElementById ("american").className = 'cardimageopacity';
    		}
		// If anyone can put textbox blank then this condition will fire.
		else if(cc == "")
		{
		document.getElementById ("visa").className = 'cardnoimageopacity';
		document.getElementById ("master").className = 'cardnoimageopacity';
		document.getElementById ("american").className = 'cardnoimageopacity';
		}
		else
		{
		document.getElementById ("visa").className = 'cardimageopacity';
		document.getElementById ("master").className = 'cardimageopacity';
		document.getElementById ("american").className = 'cardimageopacity';
		}
	}

Step 2:- then after download below CLASS of CSS and put it into /app/design/frontend/packagename/themename/template/payment/form/cc.phtml.

<style type="text/css">
	.cardimageopacity 
         {
              opacity: 0.2;
         }
        .cardnoimageopacity 
         {
              opacity: 1.0;
         }
</style>

This two classes are used for changing the opacity of the Credit Card images using Javascript function.

Step 3:- Put your Credit Card images into /skin/frontend/packagename/themename/images/

         <div>
                 <img src="<?php echo $this->getSkinUrl('images/Visalogo.jpg') ?>" id="visa" alt="" align="middle" />
                 &nbsp;&nbsp;&nbsp;&nbsp;
              	 <img src="<?php echo $this->getSkinUrl('images/Masterlogo.jpg') ?>" id="master" alt="" align="middle"/>
                 &nbsp;&nbsp;&nbsp;&nbsp;
                 <img src="<?php echo $this->getSkinUrl('images/AmericanExpresslogo.jpg') ?>" id="american" alt="" align="middle" />
                 <label for="<?php echo $_code ?>_cc_type" id="card_type"></label>                
     		 <input type="hidden" id="<?php echo $_code ?>_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select" value=""/>
        </div>

Step 4:- Then after call your Javascript function in your textbox with “onkeyup” or “onChange” Event at app/design/frontend///template/payment/form/cc.phtml

	<div>
             <label for="<?php echo $_code ?>_cc_number"><?php echo $this->__('Credit Card Number') ?> 
                  <span class="required">*</span>
             </label><br/>
             <input type="text" id="<?php echo $_code ?>_cc_number" name="payment[cc_number]" title="<?php echo $this->__('Credit Card Number') ?>" class="input-text validate-cc-number validate-cc-type" value=""  onkeyup=" changeOpacityImageValidation(this.value);"/>
       </div>

Speak Your Mind

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: