Any link drop down help

[Jon101]

1) Script Title: AnyLink CSS Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem: cant get it to work... here's my code:


<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Web Developement','','/images/nav/webdev_over.jpg',1)" "dropdownmenu(this, event, 'anylinkmenu1'" onClick="return clickreturnvalue()">

<img src="/images/nav/webdev.jpg" name="Web Developement" width="190" height="32" border="0"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div></td>

I'm trying to get it to work with an image swap as well - what am i missing?

Thanks!
Jon

[Nile]

Try this:


<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Web Developement','','/images/nav/webdev_over.jpg',1);dropdownmenu(this, event, 'anylinkmenu1')" onClick="return clickreturnvalue()">

<img src="/images/nav/webdev.jpg" name="Web Developement" width="190" height="32" border="0"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div></td>

[Jon101]

That works... but still one problem..

It wont revert back to the original image after the "Mouse Out"

[Nile]

Can I see your javascript please?

[Jon101]

Sure..


var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)

/////No further editting needed

var ie5=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function dropdownmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}

function clickreturnvalue(){
if ((ie5||ns6) && !enableanchorlink) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

its from DD, i didnt change anything.

Thanks for the help!

[Nile]

I mean the javascript that holds your MM functions.

[Jon101]

Oh, let me check.. i just did it in dreamweaver with the rollover icon...

[Nile]

Alright, post the code here when you've found it.

[Jon101]

Im having a hard time finding it... theres a good amount of JS on the page.

[Jon101]

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Im pretty sure thats it..

[Nile]

Hmm, thats some confusing javascript.
I'm sorry that I can't help with this. But glad to help with your other problem.
Nile

[Jon101]

I think its something within the code, not the JS because i have an image next to it, without a drop down and its working fine.

[Jon101]

Does something look wrong with this code, that im missing?


<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web developement','','/images/nav/webdev_over.jpg',1);dropdownmenu(this, event, 'anylinkmenu1')"><img name="web developement" border="0" src="/images/nav/webdev.jpg"></a>
<div id="anylinkmenu1" class="anylinkcss">

<a href="#">Web Hosting</a>
<a href="#">Web Site Design</a>
<a href="#">Custom Applications</a>
<a href="#">E-Commerce</a>
<a href="#">CMS</a>

I cant get this image roll out to work.

Thanks!

[Nile]

Well, you don't end your div, you may end it later in the code, but thats the only thing that hits me...

[Jon101]

it ends, i just didnt copy the </div> tag

very weird... driving me nuts! :)

[Nile]

Can I see a link to your page? That may be helpful.

[Jon101]

http://www.buildnclick.com/indexnewnav.html
Also, the drop down is elevating my images.

Thanks for the help!

[Nile]

Well, which image is the effect suppose to happen on?

[Jon101]

On the navigation, where it says Web Developent, etc.

The first 2 have the drop down effect and will not roll out on mouse out to the original image, and are both elevated.

They should work like "Networking" does, but have the drop down menu... if that makes sense.

[Nile]

Hmm, thats really weird. Sorry I can't help you. Maybe someone other on the forums could fish it out for you.

[Jon101]

Ok, thanks for your help!

I appreciate it very much!

Anyone else?

:D

[Jon101]

Any one else have any clue as to why the images will not roll back over to the original one after the mouse out?

This is very important!


Thank you so much!
Jon

[jscheuer1]

I've taken up this issue in your other thread:

http://www.dynamicdrive.com/forums/showthread.php?t=31655

See my post in it (#2). After testing (somewhat) it appears that the solution outlined there will work in this particular case. Please ask any follow up questions in that thread, as I am closing this one.