Problem with Javascripted Drop Down Navigation Using Image at Top

Hiya, I am having some trouble using drop down Navigational Bars which use images instead of Text. It is a combination of HTML, CSS and Java. Basically the code at the moment takes care of the drop down from Text, however the Top text active state needs to be replaced by an image which changes to a different hover image on mouseover. This image needs to remain visible when the drop down appears and you mouse over each drop down menu item!

This code is used at the top where the Drop Down Starts:-

[CODE]<a href=’../Services.htm’ name=’t_Services’ title=”Click here to view the Services Section [Access Key w]” target=’_top’ class=”NavTopS” id=’t_Services’ accesskey=”w” onMouseOver=”dropMenu.showMenu(‘Services’);” onMouseOut=”dropMenu.hideMenu(‘Services’);”> Services</a>[/CODE]

This code is used at the bottom for the Drop Down Elements

[CODE]<script language=”JavaScript”>
new dropMenu(“Services”, ‘down’, 10, 231, 180, 350); <!–( ? , Vertical Position, Bar length, ? )–>
</script>

<div id=”ServicesContainer”>
<div id=”ServicesContent” class=’menudrop’>
<div class=”options”><a href=’../DropDown1.htm’ target=’_top’>DropDown1</a></div>
<div class=”options”><a href=’../DropDown2.htm’ target=’_top’>DropDown2</a></div>
<div class=”options”><a href=’../DropDown3.htm’ target=’_top’>DropDown3</a></div>
<div class=”options”><a href=’../DropDown4.htm’ target=’_top’>DropDown4</a></div>
<div class=”options”><a href=’../DropDown5.htm’ target=’_top’>DropDown5</a></div>
<div class=”options”><a href=’../DropDown6.htm’ target=’_top’>DropDown6</a></div>
<div class=”options”><a href=’../DropDown7.htm’ target=’_top’>DropDown7</a></div>
<div class=”options”><a href=’../DropDown8.htm’ target=’_top’>DropDown8</a></div>
</div>
</div>[/CODE]

And this is the Java

[CODE]function openWindow(filename, pic_width, pic_height) {
pic_width=pic_width+20;
pic_height=pic_height+20;
winStats=’resizable=no,toolbar=no,location=no,directories=no,menubar=no,’;
winStats+=’scrollbars=no,width=’+pic_width+’,height=’;
winStats+=pic_height;
if (navigator.appName.indexOf(“Microsoft”)>=0) {
winStats+=’,left=10,top=25′;
} else {
winStats+=’,screenX=10,screenY=25′;
}
winLoc = filename;
floater=window.open(winLoc,”maximWindow”,winStats);
if (!floater.opener) floater.opener = self;
}

function opensWindow(filename, pic_width, pic_height) {
pic_width=pic_width+20;
pic_height=pic_height+20;
winStats=’resizable=yes,toolbar=no,location=no,directories=no,menubar=no,’;
winStats+=’scrollbars=yes,width=’+pic_width+’,height=’;
winStats+=pic_height;
if (navigator.appName.indexOf(“Microsoft”)>=0) {
winStats+=’,left=10,top=25′;
} else {
winStats+=’,screenX=10,screenY=25′;
}
winLoc = filename;
floater=window.open(winLoc,”maximWindow”,winStats);
if (!floater.opener) floater.opener = self;
}

dropMenu.Registry = []
dropMenu.aniLen = 150
dropMenu.hideDelay = 100
dropMenu.minCPUResolution = 10
// constructor

var _tpNS = (document.all)?false:true;

function getOffsetLeft (el) {
var sl = el;
var ol = el.offsetLeft;
var sh = 0;
while ((el = el.offsetParent) != null){
ol += el.offsetLeft;
if(el.offsetParent && el.offsetParent.offsetParent){
var scrollLeft = el.offsetParent.scrollLeft;
if(!isNaN(scrollLeft)){
sh -= scrollLeft;
}
}
}

el = sl;
if(_tpNS){
while((el = el.parentNode) != null){
if(el.parentNode && el.parentNode.parentNode
&& !(el.parentNode.tagName &&
el.parentNode.tagName.toUpperCase() == “BODY”)){
var scrollLeft = el.parentNode.scrollLeft;
if(!isNaN(scrollLeft) && scrollLeft > 0 ){
sh -= scrollLeft;
}
}
}
}
return ol+sh;
}

function getAbsX(elt) { return parseInt(elt.x) ? elt.x : getAbsPos(elt,”Left”); };
function getAbsPos(elt, which) { iPos = 0; while (elt != null) { iPos += elt[“offset” + which]; elt = elt.offsetParent; } return iPos; }

function dropMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom)
{
this.id = id
this.dir = dir
this.orientation = dir == “left” || dir == “right” ? “h” : “v”
this.dirType = dir == “right” || dir == “down” ? “-” : “+”
this.dim = this.orientation == “h” ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = “dropMenu_”+id
eval(this.gRef+”=this”)
dropMenu.Registry[id] = this
var newleft = getAbsX(document.getElementById(‘t_’+id)) – 5;
var d = document
var strCSS = ‘<style type=”text/css”>’;
strCSS += ‘#’ + this.id + ‘Container { visibility:hidden; ‘
strCSS += ‘left:’ + newleft + ‘px; ‘
strCSS += ‘top:’ + top + ‘px; ‘
strCSS += ‘overflow:hidden; z-index:10000; }’
strCSS += ‘#’ + this.id + ‘Container, #’ + this.id + ‘Content { position:absolute; ‘
strCSS += ‘width:’ + width + ‘px; ‘
strCSS += ‘height:’ + height + ‘px; ‘
strCSS += ‘clip:rect(0 ‘ + width + ‘ ‘ + height + ‘ 0); ‘
strCSS += ‘}’
strCSS += ‘</style>’
d.write(strCSS)
this.load()
}
}
dropMenu.prototype.load = function()
{
var d = document
var lyrId1 = this.id + “Container”
var lyrId2 = this.id + “Content”
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + “.load()”, 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval(“0” + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos – this.homePos) / dropMenu.aniLen / dropMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function(“dropMenu.showMenu(‘” + this.id + “‘)”)
this.menu.onmouseout = new Function(“dropMenu.hideMenu(‘” + this.id + “‘)”)
//set initial state
this.endSlide()
}
}
dropMenu.showMenu = function(id)
{
var reg = dropMenu.Registry
var obj = dropMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) dropMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
dropMenu.hideMenu = function(id)
{
var obj = dropMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout(“dropMenu.hide(‘” + id + “‘)”, dropMenu.hideDelay);
}
}
dropMenu.hideAll = function()
{
var reg = dropMenu.Registry
for (menu in reg) {
dropMenu.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
dropMenu.hide = function(id)
{
var obj = dropMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
dropMenu.prototype.startSlide = function(open) {
this[open ? “onactivate” : “ondeactivate”]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + “.slide()”, dropMenu.minCPUResolution)
}
dropMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() – this.startTime
if (elapsed > dropMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(dropMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == “-“) d = -d
else if (this.open && this.dirType == “+”) d = -d
else if (!this.open && this.dirType == “-“) d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
dropMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
dropMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? “visible” : “hidden”
}
dropMenu.prototype.moveTo = function(p) {
this.style[this.orientation == “h” ? “left” : “top”] = this.ns4 ? p : p + “px”
}
dropMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
dropMenu.prototype.onactivate = function() {}
dropMenu.prototype.ondeactivate = function() { }[/CODE]

I’ve tried adding CSS and HTML but there seems to some kind of conflict with the hover state. Does anybody have a solution to this or know what i need to add to get the top Nav Bar appearing as a rollover image within this Drop Down Menu?

Will put all the code back on here if i can get it working!

Thanks

webphoenix

Also in #JavaScript _↴