이미지 그레이 스케일링 및 원래 이미지 참조하기

Question

이미지를 회색조하는 방법을 알고 있습니다. jquery 아코디언을 사용하고 있으며 모든 아코디언 헤더에 이미지가 있습니다. 아코디언이 활성 상태 일 때 이미지를 회색 음영으로 변경하고 아코디언이 활성화되지 않은 상태에서 이미지를 다시 원래 상태로 변경하려고합니다. 나는 accordionChange 이벤트를 사용하고있다. 문제는 원본 이미지를 저장할 수 없다는 것입니다. 도와주세요. 또한 회색 음영 처리 후 원본 src에 직접적으로 넣으려고 시도했습니다.

document.getElementById("imgId").src = "images/pic.jpg"; 

이것은 작동하지 않습니다.

Answer 1

여기 JQuery와 UI 아코디언을 사용하여 대답하는 경우 :

//please note these are global variables 
var imageArr=[]; 
var oldIndex = false; 
var oldSrc; 
$(document).ready(function(){ 

//grab all heading images 
imageArr = $("#accordion h3 img"); 

$("#accordion").accordion({ 
    change: function(event, ui) { 
     active = ui.options.active; 


     //restore clicked image 
     if (oldIndex!==false) { 
      $(imageArr[oldIndex]).attr("src",oldSrc); 
     } 

     //save current index for the future 
     oldIndex = active; 
     //save original src for the future 
     oldSrc = $(imageArr[active]).attr("src") 
     //implement some logic here to choose grayscale image and set the src value 
     $(imageArr[active]).attr("src","grayscale.png"); 
    } 
}); 

})