Is it possible to add individual 'background' images to the Apple Accordion Menu?

[Raubie]

1) Script Title: Apple Accordion Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-apple.htm

3) Describe problem: Probably a tricky thing to do, but I was wondering if it is possible to add individual background pictures to the open menus below the header name.

I looked at the code and wouldn't even knew where to begin. I don't want the same image appearing twice, and only want one or two with individual background images. In-line images are simple, but are background images possible with this script?

My apologies if this has been addressed earlier (I did look).

Many thanks. ~ Raubie

[azoomer]

this approach can get you a specific picture in the backgroung of selected menu points

.applemenu div:nth-child(2){ 
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
.applemenu div:nth-child(4){ 
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}

Try this first, then change the picture url to your images and finally experiment with the number in parenthesis

[azoomer]

Raubie, while this selector works fine in FF, chrome, safari and opera, I just discovered that internet explorer unfortunately doesn't support it. Maybe someone else knows of a better way to select this ? I guess it will work if you do it with jQuery though. I might try this out.

[azoomer]

Alright, this is the same made with jQuery

<script type="text/javascript">
$(document).ready(function(){
$('.applemenu div:nth-child(2)').css({
		 backgroundImage :'url("http://i27.tinypic.com/sy7295.gif")',
		 backgroundRepeat: 'no-repeat'						
	});
});
</script>

and it actually works in internet explorer. You can see it here. Well that's my 2 cents worth. Maybe someone else has a smarter solution.

[Raubie]

this approach can get you a specific picture in the backgroung of selected menu points

.applemenu div:nth-child(2){ 
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}
.applemenu div:nth-child(4){ 
background: url("http://i27.tinypic.com/sy7295.gif"); background-repeat:no-repeat;

}

Try this first, then change the picture url to your images and finally experiment with the number in parenthesis

Quite brilliant, can't wait to try this out!

Thank you azoomer!

[Raubie]

Alright, this is the same made with jQuery

<script type="text/javascript">
$(document).ready(function(){
$('.applemenu div:nth-child(2)').css({
		 backgroundImage :'url("http://i27.tinypic.com/sy7295.gif")',
		 backgroundRepeat: 'no-repeat'						
	});
});
</script>

and it actually works in internet explorer. You can see it here. Well that's my 2 cents worth. Maybe someone else has a smarter solution.

WOW! I'd given up on this working in IE. Got to love jQuery!

Azoomer, I can't thank you enough for these three changes. I'm realizing how rusty I am.

Is there any way for the DD admins to add your improvements as addendum to the original post (or code)?

Thanks so much! ~ Raubie