Omni Slide Menu script background image

[Immi]

1) Script Title: Omni Slide Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lide/index.htm

3) Describe problem: Hi, I want to have this slide menu with an background-image instead of a color or transparency. Is that possible and if yes how to fix it? Thank you.
Immi

[jscheuer1]

It depends upon where and how you want that image to be.

If you just want it tiled behind the links, you can set it in the style section, example for menu1:

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}

could be changed to:

#menu1 a {color:black;background:white url(some_image.gif);text-decoration:none;text-indent:1ex;}

[Immi]

Well, I changed the line you were talking about but it didn't work.
It would be better for me to have the background-image set to the entire menu box because it contains just links and no head lines with a different background color. I can post you a link of my first try. The html file:
http://www.pleitegeier96.de/800x600/test.html
and the iframe htm for the left menu:
http://www.pleitegeier96.de/800x600/navlinks.htm
http://www.pleitegeier96.de/800x600/...uItemslinks.js
But the layout is not that great and I want to change it. It will be in a look of a parchment and the menus should wide it up. So I need the image either fill up the link boxes completely or the entire box at ones. I hope that this could be done. Thank you.
Immi

[jscheuer1]

With what you have at the moment, all you should need to do is to add this to your style sheet:

  <style type="text/css">
a:link {color: rgb(120, 111, 86); text-decoration:none; text-indent:1ex; font-weight: bold;}
a:visited {color: rgb(120, 111, 86); text-decoration:none; text-indent:1ex; font-weight: bold;}
a:active {color: rgb(120, 111, 86); text-decoration:none; text-indent:1ex; font-weight: bold;}
a:hover {color: #ffff00; text-decoration:none; text-indent:1ex; font-weight: bold;}
#menu1 table {
background:transparent url(http://www.pleitegeier96.de/800x600/layout/linksoffen.jpg);
}
  </style>

You can use whatever image you like, but try it first with that one because I know you can see it.

[Immi]

It didn't work neither with "allowtransparent:true" nor with false. Any other way to fix it? Maybe in the other js file?
Immi

[Immi]

Ok, I found it by myself. You have to add the background-image in the mmenu.js file:

'#'+o.id+' div {\n'+
'border-width:'+(typeof o.outbrdwidth=='number'? o.outbrdwidth+'px' : o.outbrdwidth)+'; /*Menu\'s outer border*/\n'+
'border-style:'+o.outbrdstyle+';\n'+
(o.outbrdcolor=='none'? '' : 'border-color:'+o.outbrdcolor+';\n')+
'position:absolute;\n'+
'color:black;\n'+
'background-image:url(anypicture.jpg);\n'+
'background-color:transparent;\n'+
'}\n'+

And it's necessary to set allowtransparent:true in the other .js file! I don't really know Javescript so I can't say if the picture has to be the right size or if you can size it in the mmenu.js file. For me it is just fine now. Thank you in any way.
Immi