如何动态更改 Edge Animate 符号中的图像？

Question

我正在开发一个网站原型，该原型在导航中包含许多翻转图像。每个图像都是唯一的，但翻转和推出代码是相同的。我正在尝试创建一个可用于所有翻转的符号，但需要一些帮助来解决这个问题，因为它会显着加快我的工作。

我认为伪代码会这样工作

1. 创建一个包含默认翻转图像的符号。
2. 在符号中，添加翻转和转出代码。这会将透明度从 0 -> 100 调整回来。
3. 在导航中的每个项目上创建符号实例。
4. 对于每个实例，设置一个包含要使用的翻转图像名称的变量。
5. 在该符号实例中，获取变量值。
6. 在该符号实例中，使用变量中的图像名称替换默认图像。

问题：如何让第 4-6 步工作？我让第 1-3 步工作顺利。

---

更新：我已经解决了 #6

图像都由 CSS background-image 属性管理，而不是老式的<img src=...>。所以要为一个元素设置一张图片，语法是：

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

还有第二部分，就是让 [image] 正确。

1. 使用边缘图像的默认相对 URL：images/[image]
2. 使用 CSS 背景图像的标准语法：url(images/[image])

---

附：我的最后一项开发工作是与 Director、PHP 和 ColdFusion 合作。我仍然了解基本原则，例如使用函数、对象、实例、继承等，但语言已经改变。而且我对 DOM 的经验非常少。

---

附录：我如何手动执行此操作

1. 导航的背景图片显示了所有未选中的状态

2. 导航中的每个项目都有一个对应的翻转图像，位于导航元素顶部的一系列元素中。每个翻转的不透明度最初设置为 0%。

3. 每个图像元素都有翻转、滚动和点击触发器。翻转和转出触发器对于每个都是相同的。还有一些带有推出的代码可以提供快速淡入淡出。这意味着大量复制相同的代码。我不想考虑必须更改该代码的任何部分。

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 事件上。