1

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

我认为伪代码会像这样工作

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

问题：如何使步骤 4-6 工作？ 我有1-3个工作顺利。

更新：我已经解决了#6

图像全部由 CSS background-image 属性而不是 old-school 管理<img src=...>。因此，要为元素设置图像，语法是：

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

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

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

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

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

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

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

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

4

1 回答 1

1

我得出了和你一样的结论。

步骤 4-5 我是这样做的：当我创建符号实例时，我给它一个特殊的名称，比如“button_image1”。然后在代码中你可以检查这个属性：

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

并将正确的图像设置为背景。

您可以将此代码放在符号的 creation_complete 事件上。

于 2013-05-22T15:48:16.363 回答