Accordion Script Problems

[prisonsong]

In this example, let's say I have two buttons that I want to have. Both of these have image pairs used for the rollovers.

These images are info.png and info_active.png for the first button. The second set is contact.png and contact_active.png.

Assuming I set up the array like you had suggested, then the script defining that array should look something like this:

var expandedbackgrounds=[]
expandedbackgrounds[0]="url (info_active.png)"
expandedbackgrounds[1]="url (contact_active.png)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url (info.png)"
contractedbackgrounds[1]="url (contact.png)"

This much is easy enough. I also set up the onopenclose() function with the corresponding image I want based on its value in the array or so I am assuming.

Lets say I'm ready to set this up in the actual page code, using CSS as I'm doing it.

This is what my header's styles look like, most of which is relative to the script given in the original accordion code:

.arrowlistmenu .menuheader{
font: bold 14px Verdana;
color: white;
margin-bottom: 1px;
text-transform: uppercase;
cursor: hand;
cursor: pointer;
height: 35px;
}

Because at the moment it makes no difference, I omitted the background image command so I'm not confusing anyone with code that is now obsolete.

Assuming I had a separate div for each header but using this CSS as reference, how would I tell my code to call from the array I had set up? Would I be using javascript inside of my CSS? Please keep in mind I'm as new as can be with javascript so specifics are appreciated.

Thank you.

EDIT: It seems I was creating this post as you replied to my previous ones. Thank you for answering my question about the javascript placement. The only one that remains is how to use this script once I've set it. The javascript is done, now how do I make CSS/html recognize it in my page?

[ddadmin]

There should be no spaces between url and (), so:

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(info_active.png)"
expandedbackgrounds[1]="url(contact_active.png)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(info.png)"
contractedbackgrounds[1]="url(contact.png)"

[prisonsong]

lol Thank you I suppose for that minor oversight. The javascript is irrelevant however. What I'm asking is now that it is done and set up, how do I tell the actual designing languages (CSS/html) how to put one of these images into the page?

This is going to look stupid because I know nothing about javascript but would it be something like this:

.arrowlistmenu .menuheader{
font: bold 14px Verdana;
color: white;
background: contractedbackgrounds[0]
margin-bottom: 1px;
text-transform: uppercase;
cursor: hand;
cursor: pointer;
height: 35px;
}

I honestly don't know how to tell CSS to point to this array. Until I figure it out, the javascript can't really help me.

EDIT: Well I can tell you that putting it that way didn't do it. I'm still at a loss for how to put this into the page.

[ddadmin]

You wouldn't, actually, as the JavaScript above explicitly sets the background of the DIV with the referenced background image. There's no need to specify a background attribute in your CSS at all.

[prisonsong]

So what would I do to set two separate DIVs using both of those different image pairs?

<div class="info">This DIV needs the info background images.</div>

<div class="contact">This DIV needs the contact background images.</div>

And so on...

I just don't know how to specify which DIVs get which image pair, even when they are in the array. I figured I would have to put something in the CSS, but if I don't, then how does it decipher which DIVs are getting which background images?

[ddadmin]

Which DIV gets which pair of images specified in the array is based on the order of the DIVs on the page. That is, the first DIV would get expandedbackgrounds[0] and contractedbackgrounds[0], the second DIV expandedbackgrounds[1] and contractedbackgrounds[1], and so on.

[prisonsong]

Oh damn I hope you don't mean that in a literal sense.

The first few DIVs on my page have nothing to do with this navigation menu.

[prisonsong]

I gotta say, I'm not too far from giving up. I think this javascript stuff is a little over my head.

I've put the array in the exact same spot as you indicated in your later example. I even copied and pasted so I wouldn't make a stupid mistake like putting spaces before url. Not only this, but when that didn't work I tried a number of variations that were long shots, but attempts nonetheless.

Maybe something is wrong, but more likely I'm just not understanding how you are telling me to do this. Apparently the DIVs require nothing to have the background images inserted, and while this makes no sense to me you seemed pretty sure of it so I even created a sample page where the only DIVs on the page are those of my navigation menu, corresponding with the assignments given to them by the array, still didn't work.

Honestly I've run out of ideas, and the documentation linked to from the accordion script page doesn't cover arrays or complex situations such as this. I've read through it multiple times only to find that migrating what they put to what I need is impossible unless I did some serious homework on javascript starting now, but I don't have the time.

Before I call it quits on this altogether, is anyone sure there isn't an ezmode way to explain this so that I couldn't possibly have room for questions? As it has been explained so far, it would appear I'm doing everything the way it should be done, but I still can't produce the desired result.

Any and all help or suggestions is appreciated.

[prisonsong]

Wow, a triple post. Surely someone has a solution to this problem. My only real issue is I want a different image for each header, and a rollover for that image after it is clicked.

I saw a similar problem browsing the forums where the guy fixed it himself using CSS classes. He wasn't specific on how he did this but I was wondering if anyone had any idea how he might have accomplished this.

The page I'm referencing is here:

http://www.dynamicdrive.com/forums/s...ad.php?t=35897

[ddadmin]

I'd like to further help you, but it's hard to understand exactly where you're having trouble with just based on what you've written above. It might help if you created a very simple page with the script installed, a couple of headers, and what you have so far in trying to accomplish what you're trying to accomplish.

I saw a similar problem browsing the forums where the guy fixed it himself using CSS classes.

Please see this thread: http://www.dynamicdrive.com/forums/s...ad.php?t=36915