Problem implementing images into dropdown menu

[mosarani]

I have a bare-bones javascript dropdown menu on the site I'm building here. The scripting is here. My problem is getting image swap functionality so that I can replace the top level menu items with images that change based on user activity.

With my little knowledge of javascript I can't seem to reconcile the image swap code I've seen online. The only other thing I knew to try was frontpage's builtin interactive buttons feature. Whenever I implement a button on a page with my dropdown menu, the dropdown menu breaks. The code that frontpage creates is here:

Code: Select all

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}



/*Then the html of the button*/

onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button16.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button15.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button17.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button16.jpg')" fp-style="fp-btn: Glass Capsule 3; fp-orig: 0" fp-title="Button Text">

Can someone help me figure out how to build an image swap function into the dropdown menu I have?

[dafunkymunky]

i cant understand the code above.. just do this..

function loadimg(sorc,id)
{
img=document.getElementById(id)
img.src=sorc;
}

function replaceimg()
{
img=document.getElementById(id)
img.src='the_original_filename_here';
}


<img src="the_original_file_name" id="something" onMouseover="loadimg('the_chageimg_url',this.id)" onMouseout="replaceimg()">