combining AnyLink JS Drop Down Menu v2.2 and Style Sheet Switcher (v1.1)

[X-Tream]

1) Script Title:
AnyLink JS Drop Down Menu v2.2
Style Sheet Switcher (v1.1)

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

3) Describe problem:

So what i'm trying to do is to combine these two codes to between, but i'm having some problems. I'm using the 4th anchor link and the problem what i'm having is that code has "data-image" and "data-overimage" with of course will not work with style sheet switcher due the style switcher fetches the codes from .css.

So the question is how can I make the style switcher work with anylink so that it fetches the "data-image" and "data-overimage" from my .css

I have tried this with no luck:

STYLE.CSS:

#muutanavi1 {
data-image: url('punainen/muuta.png') no-repeat;
}

#muutanavi2 {
data-overimage: url('punainen/muuta_hover.png') no-repeat;
}

#muutanavi3 {
background: url('punainen/muuta_hover.png') no-repeat;
}

INDEX.HTML

 <a href="index.html" class="menuanchorclass" rel="anylinkmenu4" id="muutanavi1" id="muutanavi2" ></a><div id="muutanavi3"></div>

I'm extremely sorry for my bad English, but I hope you guys can understand my problem. (:

Hope someone can help me, I would really appreciate it.

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[X-Tream]

Hello,

I totally forgot to put the link to my site, sorry for that.

1 ) So the following link is the one which I have tried to modify it to get the script working:
http://netti-tv.net/test
2) And this link is the unmodified version of the script:
http://netti-tv.net/testii

When you put your mouse over the navigation button called "muuta" you can see that in the 1) link it works perfectly, but when you move your mouse over "MoonTV" or "SuomiTV" the hover of the "muuta" navigation disappears. In link 2) the code works as it's should, but the "muuta" navigations color is wrong...

Please DDAdmin I would really appreciate your help with this problem.

[ddadmin]

Your current menu consisting of pure images makes it cumbersome to style the active menu item within Anylink Menu, as there's no simple way in CSS to replace the foreground image of an element (the approach Anylink menu employs). A much better approach is to scrap your current menu and resort to one that uses CSS and CSS background-image to style itself, which makes it easier to customize, not to mention get the active menu item feature to work with it. So instead of say:

<div id="menu"> 
	  
	  <div id="nav11"><a href="index.html"></a></div> 
	  <div id="nav2"><a href="yle.php"></a></div> 
	  <div id="nav3"><a href="mtv3.php"></a></div> 
	  <div id="nav4"><a href="nelonen.php"></a></div> 
	  <div id="nav5"><a href="sub.php"></a></div> 
	  <div id="nav6"><a href="jim.php"></a></div> 
	  <div id="nav7"><a href="muuta.html" class="menuanchorclass" rel="anylinkmenu4" id="muutanavi1" id="muutanavi2" ></a><div id="muutanavi3"></div></div> 
	  <div id="nav8"><a href="/keskustelu"></a></div> 
	  
	</div>

I would use a pure CSS rendition instead, lets say Solid Block Menu:

<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>

Since the hover effect of such a menu is rendered by simply swapping CSS background images, this enables you to easily style the active menu item by specifying a different background image. With that said, your default.css file may look like this:

body{
color:black;
}

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(blockactive.gif) center center repeat-x;
}

.selectedanchor{
background: transparent url(blockactive.gif) center center repeat-x;
}

and your custom.css file may look like this to cause the menu to have a differrent background image plus active menu item background:

body{
color:red;
}

.solidblockmenu{
background: black url(blockdefaultalt.gif) center center repeat-x !important;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(blockactivealt.gif) center center repeat-x !important;
}

.selectedanchor{
background: transparent url(blockactivealt.gif) center center repeat-x;
}

I've included example.zip below, which contains a working example of this.