가장자리 애니메이션 기호에서 이미지를 어떻게 동적으로 변경할 수 있습니까?

Question

나는 네비게이션에 많은 롤오버 이미지가있는 사이트 프로토 타입을 만들고 있습니다. 각 이미지는 고유하지만 롤오버 및 롤아웃 코드는 동일합니다. 모든 롤오버에 사용할 수있는 단일 심볼을 만들려고하는데,이를 이해하는 데 도움이 필요합니다. 이는 내 작업 속도를 크게 높일 것이기 때문입니다.

는 내가 의사가 기본 롤오버 이미지를 포함하는 심볼을 만들이

1. 처럼 작동 할 것이라는 점을 생각한다.
2. 기호에서 롤오버 및 롤아웃 코드를 추가하십시오. 이렇게하면 투명도가 0 -> 100으로 조정됩니다.
3. nav의 각 항목 위에 심볼의 인스턴스를 만듭니다.
4. 각 인스턴스에 대해 사용할 롤오버 이미지의 이름을 포함하는 변수를 설정하십시오.
5. 해당 심볼 인스턴스에서 변수 값을 가져옵니다.
6. 해당 심볼 인스턴스에서 변수의 이미지 이름을 사용하여 기본 이미지를 바꿉니다.

질문 : 4-6 단계를 수행하려면 어떻게합니까? 1 ~ 3 번은 원활하게 작동합니다.

---

업데이트 : 나는 # 6

이미지는 모든 오히려 구식 <img src=...>보다 CSS 배경 이미지 속성에 의해 관리되는를 해결해야합니다.

$(sym.lookupSelector("[ElementName]")).css('background-image', [image]); 

및 [이미지] 오른쪽지고 제 2 부분이있다 : 그래서 요소의 화상을 설정하는 구문이다.

1. 에지 이미지에 대한 기본 상대 URL 사용 images/[image]
CSS 배경 이미지에 대한
2. 사용 표준 문법 : url(images/[image])

---

P.S.을 필자가 마지막으로 수행 한 작업은 Director, PHP 및 ColdFusion과 함께 waaaaay였습니다. 나는 여전히 함수, 객체, 인스턴스, 상속 등을 사용하는 것과 같은 기본 원칙을 갖지만 언어는 변했다. DOM에 대한 경험이 거의 없습니다.

---

부록 : 나는이 수동으로하고있어 어떻게 순자산 가치 (NAV)의 각 항목이있다 선택되지 않은 상태

을 모두 보여주는 탐색의 배경 이미지가있다

1. 해당 롤오버 이미지를 nav 요소 상단에 레이어 된 일련의 요소로 나타냅니다. 각 롤오버의 불투명도는 처음에 0 %로 설정됩니다.

2. 각 이미지 요소에는 롤오버, 롤아웃 및 클릭 트리거가 있습니다.롤오버 및 롤아웃 트리거는 각각 동일합니다. 빠른 페이드를 제공하는 롤아웃이있는 코드가 조금 더 있습니다. 이것은 동일한 코드를 복사하는 것을 의미합니다. 나는 그 코드의 어떤 부분을 변경해야한다고 생각하는 것을 싫어한다.

Answer 1

나는 당신과 같은 결론에 도달했습니다.

4-5 단계 이렇게하면 : 심볼 인스턴스를 만들 때 "button_image1"과 같은 특별한 이름을 지정합니다. 그런 다음 코드에서이 속성 행함 확인할 수 있습니다

var symbolElement = sym.getSymbolElement(); 
var id = symbolElement.attr("id") 
var tokens = id.split("_"); 
var image = tokens[1]; 

을 그리고 배경으로 오른쪽 이미지를 설정합니다.

이 코드는 심볼의 creation_complete 이벤트에 넣을 수 있습니다.