图片切换

/******软电话控制***** */ 
/**
 *  接听 挂断 保持 取回 转接 会议 签入 签出 置闲 置忙 小结 工单
 *  */ 
var butIdArry = ['butanSwer','butHangUp','butKeep','butRetrieve','butTransFer','butMeeTing','butCheckIn','butLogin','butLogout','butWorking','butHaverest','butSummAry','butWorkOrder'];
var imgSrc = [];
    imgSrc[0] = {
        butanSwer:'iconAnswer3.png',butHangUp:'iconHangup3.png',butKeep:'iconHoldon3.png',butRetrieve:'iconGetback3.png',butTransFer:'iconTransfer3.png',
        butMeeTing:'iconMeeting3.png',butCheckIn:'iconLogin3.png',butLogin:'iconLogout3.png',butLogout:'iconWorking3.png',butWorking:'iconRest3.png',
        butSummAry:'iconSummary3.png',butWorkOrder:'iconWorkFlow3.png'
    }; //灰色

    imgSrc[1] = {
        butanSwer:'iconAnswer2.png',butHangUp:'iconHangup2.png',butKeep:'iconHoldon2.png',butRetrieve:'iconGetback2.png',butTransFer:'iconTransfer2.png',
        butMeeTing:'iconMeeting2.png',butCheckIn:'iconLogin2.png',butLogin:'iconLogout2.png',butLogout:'iconWorking2.png',butWorking:'iconRest2.png',
        butSummAry:'iconSummary2.png',butWorkOrder:'iconWorkFlow3.png'
    }; //滑过

    imgSrc[2] = {
        butanSwer:'iconAnswer1.png',butHangUp:'iconHangup1.png',butKeep:'iconHoldon1.png',butRetrieve:'iconGetback1.png',butTransFer:'iconTransfer1.png',
        butMeeTing:'iconMeeting1.png',butCheckIn:'iconLogin1.png',butLogin:'iconLogout1.png',butLogout:'iconWorking1.png',butWorking:'iconRest1.png',
        butSummAry:'iconSummary1.png',butWorkOrder:'iconWorkFlow3.png'
    }; //点亮

    var lastImgStatus="";

    /**
* 改变图片状态
*/

chaImgStatus('100000000000');


function chaImgStatus(sStatusArray) {
	lastImgStatus=sStatusArray;
	var imgBaseDir="./image/";
	for(var i=0; i<sStatusArray.length; i++){
		var activeFlag=sStatusArray.charAt(i) != '0';
		var imgIndex =parseInt(sStatusArray[i]);
		if(isNaN(imgIndex)){
			continue;
		}
		var $soft_btn=$("#"+butIdArry[i]);

		$soft_btn.attr("disabled",activeFlag);
		$soft_btn.attr("src",imgBaseDir+imgSrc[imgIndex][butIdArry[i]]);
		if(activeFlag){
			$soft_btn.bind({
				mouseover:function(){
					var $this=$(this);
					$this.attr("src",imgBaseDir+imgSrc[2][$this.attr("id")]);
				},
				mouseout:function(){
					var $this=$(this);
					$this.attr("src",imgBaseDir+imgSrc[1][$this.attr("id")]);
				},
				mousedown:function(){
					var $this=$(this);
					$this.attr("src",imgBaseDir+imgSrc[0][$this.attr("id")]);
				}
			}).css("cursor","pointer");

		}else{
			$soft_btn.unbind("mouseover").unbind("mouseout").unbind("mousedown").css("cursor","");
			$soft_btn.attr('disabled', true);
		}
	} 
}

 <ul id="but_phone">
                                                    <li><img id="butanSwer" butIco = "iconLogin"/></li>
                                                    <li><img id="butHangUp" butIco = "iconLogin"/></li>
                                                    <li><img id="butKeep" butIco = "iconLogin"/></li>
                                                    <li><img id="butRetrieve" butIco = "iconLogin"/></li>
                                                    <li><img id="butTransFer" butIco = "iconLogin"/></li>
                                                    <li><img id="butMeeTing" butIco = "iconLogin"/></li>
                                                    <li><img id="butCheckIn" butIco = "iconLogin"/></li>
                                                    <li><img id="butLogin" butIco = "iconLogin"/></li>
                                                    <li><img id="butLogout" butIco = "iconLogin"/></li>
                                                    <li><img id="butWorking" butIco = "iconLogin"/></li>
                                                    <li><img id="butHaverest" butIco = "iconLogin"/></li>
                                                    <li><img id="butSummAry" butIco = "iconLogin"/></li>
                                                    <li><img id="butWorkOrder" butIco = "iconLogin"/></li>
                                                </ul>

 

转载于:https://my.oschina.net/u/4005929/blog/2878720