Creating Symbol Instances containing a dynamically set image - Help Needed

Question

I'm working on a site prototype that has many rollover images in the navigation. Each image is unique, but the rollover and rollout code is identical. I'm trying to create a single symbol that can be used for all of the rollovers, but need some help figuring this out, as it will significantly speed up my work.
I think the pseudocode would work like this:
Create a symbol that contains a default rollover image.
In the symbol, add the rollover and rollout code. This adjusts transparency from 0 -> 100 and back.
Create instances of the symbol over each item in the nav.
For each instance, set a variable containing the name of the rollover image to be used.
In that symbol instance, get the variable value.
In that symbol instance, use the image name in the variable to replace the default image.
Question: How do I make step 4-6 work? I have 1-3 working smoothly.P.S. My last dev work was waaaaay back with Director, PHP and ColdFusion. I still get basic principles such as using functions, objects, instances, inheritance etc, but the language has changed. And I have very very little experience with the DOM.
Appendix: How I'm Doing This Manually
There's a background image of the nav showing all of the unselected states
Each item in the nav has a corresponding rollover image, in a series of elements layered on top of nav element. Each rollover has opacity initially set to 0%.
Each image element has rollover, rollout and click triggers. Rollover and rollout triggers are identical for each. There's also a little more code with rollout that provides a quick fade. This means lots of copying identical code. I hate to think about having to change any part of that code.
Thanks! Chassy

Answer 1

Hi there,
Perhaps a more simple solution would be to set up 1 global function that handles over/out states for all your buttons. On mouseenter/mouseleave of each button you would call this function to fade in/out your rollover graphic.
Example:
http://www.timjaramillo.com/code/edge/rollover4_multiple_btns
Source:
http://www.timjaramillo.com/code/edge/_source/rollover4_multiple_btns.zip
Code on Stage.compositionReady (note there are btn symbols called btn_1, btn_2, btn_3, and all have an over state called "over" in them):
var array_btns = ["btn_1", "btn_2", "btn_3"];// array to hold all your btns
function setup_btns()
          // iterate through array_btns, add "mouseenter" and "mouseleave" for all
          for (var i=0; i<array_btns.length; i++){
                    // hide "over" state initially
                    sym.getSymbol( array_btns[i] ).$("over").hide();
                    sym.$( array_btns[i] ).mouseenter({obj:array_btns[i]}, function(e){
                              var btn = e.data.obj;
                              sym.getSymbol(btn).$("over").fadeIn(500);// show "over" graphic
                    sym.$( array_btns[i] ).mouseleave({obj:array_btns[i]}, function(e){
                              var btn = e.data.obj;
                              sym.getSymbol(btn).$("over").fadeOut(200);// hide "over" graphic
setup_btns();