Need Help with drop down menu please

1) AnyLink JS Drop Down Menu v2.3

2) http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Is it possible for me to do these two things with this script:
1- Can I make the drop down menu made up of images rather than text and background? So when mouse goes over the image, two or three images show under it, each with a certain link.

2- As you can see when mouse goes over the "Get the News" button, the drop down menu shows in front of the button, so it covers the lower half of the button. Is it possible for to make it appear right under the button and not covering and portion of the button? I tried everything but was not successful so far.

Anyone??

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ .pop { position:absolute;z-Index:101;left:100px;top:-500px;width:120px;background-Color:#FFFFCC;text-Align:center;padding:5px;border:solid red 1px; } /*]]>*/ </style></head> <body> <a class="zxcDropID:m1;Fade:500;EventType:click;OffsetX:50;OffsetY:0;Group:pets;" >LINK</a> <a class="zxcDropID:m2;Group:pets;" >LINK</a> <img class="zxcDropID:m3;" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" width="100" /> <div id="m1" class="pop" > <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" /> <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="100" /> </div> <div id="m2" class="pop" > <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" width="100" /> <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" width="100" /> </div> <div id="m3" class="pop" > <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" width="100" /> </div> <script type="text/javascript"> /*<![CDATA[*/ // Simple Drop Element (27-March-2013) // by Vic Phillips - http://www.vicsjavascripts.org.uk/ var zxcDrop={ init:function(){ var els=document.body.getElementsByTagName('*'),s,i,o,z0=0,z0a; for (;z0<els.length;z0++){ if (els[z0].className&&els[z0].className.match('zxcDropID:')){ s=els[z0].className.split(';'); o={obj:els[z0]}; for (z0a=0;z0a<s.length;z0a++){ i=s[z0a].indexOf(':'); if (i>2){ o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1); } } o.pop=document.getElementById(o.zxcdropid); if (o.pop){ this[o.zxcdropid]=o; if (o.group){ this[o.group]=o; } document.body.appendChild(o.pop); o.pop.style.top='-3000px'; o.ms=isFinite(o.fade*1)?o.fade*1:1000; o.osx=isFinite(o.offsetx*1)?o.offsetx*1:(o.obj.offsetWidth-o.pop.offsetWidth)/2; o.osy=isFinite(o.offsety*1)?o.offsety*1:o.obj.offsetHeight+3; o.ary=[o.pop,0,false]; if (o.eventtype=='click'){ this.addevt(o.obj,'click','show',o,true); this.addevt(document,'click','click',o); } else { this.addevt(o.obj,'mouseover','show',o,true); this.addevt(o.pop,'mouseover','show',o,true); this.addevt(o.obj,'mouseout','show',o,false); this.addevt(o.pop,'mouseout','show',o,false); } } } } }, show:function(o,ud,e){ var oop=this,p=oop.pos(o.obj),c=e&&e.type=='click'; if (o.group){ if (oop[o.group]!=o&&oop[o.group].ary[1]!=0){ oop.show(oop[o.group],false); } this[o.group]=o; } clearTimeout(o.to); o.to=setTimeout(function(){ o.ary[2]=!o.ary[2]; oop.animate(o,o.ary,o.ary[1],(!c&&ud)||(c&&o.ary[2])?100:0,new Date(),o.ms); if (ud){ o.pop.style.left=p[0]+o.osx+'px'; o.pop.style.top=p[1]+o.osy+'px'; } oop.lst=o; },ud?10:500); }, click:function(o,ud,e){ var obj=e.target?e.target:e.srcElement; while (obj.parentNode){ if (obj==o.obj||obj==o.obj){ return false; } obj=obj.parentNode; } if (o.ary[1]>0){ this.show(o,false) } }, animate:function(o,ary,f,t,srt,mS){ clearTimeout(ary[3]); var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ ary[1]=Math.max(n,0); oop.opc(ary[0],ary[1]); } if (ms<mS){ ary[3]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10); } else { ary[1]=t; oop.opc(ary[0],t); } }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, opc:function(o,n){ o.style.filter='alpha(opacity='+n+')'; o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001; n==0?o.style.top='-3000px':null }, addevt:function(o,t,f,p1,p2){ var oop=this; if (o.addEventListener){ o.addEventListener(t,function(e){ return oop[f](p1,p2,e);}, false); } else if (o.attachEvent){ o.attachEvent('on'+t,function(e){ return oop[f](p1,p2,e); }); } } } zxcDrop.init(); /*]]>*/ </script> </body> </html>

I don't know if I'm posting in the right place never done it before.

Please excuse.

I'm using the DD drop down menu,

I have a free supplier website-I can't actually get into the (root) but can load codes and script.

every time I change the css the old one is still there.

I'm guessing its the names of the files

ddmegamenu.js
ddmegamenu.css

Is it possible to change these names to ddmegamenusbar (JS CSS)

http://www.dynamicdrive.com/dynamici...ddmegamenu.htm
EXAMPLE 1

and still have it all fit together so perfectly like now using all the same copy and past or what changes would I have to make?

If it wasn't a supplier website I would just delete from root reload and change name and so on.

I know its something simple....I just know...

any help appreciated

Any help appreciated