2 peachy
10-19-2003, 06:32 PM
not sure if I am calling this right....
I have a script for a menu that slides down as each link is clicked on.....
there is a css file that sets the styles... and the original buttons were made with css...
I am in the process of modifying this menu...
I have added an image button to the top of the menu which has a rollover effect.....
on top of the main buttons to the menu, I have added an image.... and this works ...but.....
I would like to be able to have the same rollover effect on the other buttons.... like I have on the home button...
every time I try to do it... it breaks the script ( Im guessing here" and the menu doesnt work anymore....
here is the html for the menu... with script...
the images wont show... but you will know what is happening...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
<html>
<head>
<title>menu test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style>
<!--
a.nav:link {
font-family: Verdana, Arial,
"San Serif";
font-size: 10pt;
text-decoration: none;
font-weight: normal;
color: 644A25;
}
a.nav:visited {
font-family: Verdana, Arial,
"San Serif";
font-size: 10pt;
text-decoration: none;
color: #A85659;
}
a.nav:active { font-family:
Verdana,Arial,San Serif; font-size:
10pt; text-decoration: none }
a.nav:hover { font-family:
Verdana,Arial,San Serif; font-size:
10pt; text-decoration: none;
color: #359946 }
.HEADING { cursor: hand;
font-family: Verdana, Arial, "San
Serif"; font-size: 10pt; color:
#644A25; font-weight: normal;
border: 1 solid #E8E8D8}
.LINKSOFF { display: none;
font-family: Verdana,Arial,San Serif;
font-size: 10pt; color:
#359946 }
.LINKSON { display: inline;
font-family: Verdana, Arial, "San
Serif"; font-size: 10pt}
-->
</style>
<Script Language="VBscript">
// Copyright 2001 Stephen Hayes
(steve@obtsolutions.co.uk)
// OBT Solutions UK
(http://www.obtsolutions.co.uk)
// Permission granted to
SimplytheBest.net to feature script in
its
// DHTML script collection at
http://simplythebest.net/info/dhtml_scri
pts.html
<!--
Option Explicit
DIM menuID,menuObj,cellBk
SUB ShowHide(menuID)
menuObj = "Link" & menuID
cellbk = "Head" & menuID
// CHECK IF OPEN
if document.all.item(menuObj).className
= "LINKSON" then 'IF MENU OPEN THEN
CLOSE
document.all.item(menuObj).className =
"LINKSOFF"
document.all.item(cellBk).style.backgrou
ndColor = "transparent" ' SET CELL
BACKGROUND COLOR TRANSPARENT
ELSE
document.all.item(menuObj).className =
"LINKSON" ' OPEN MENU
document.all.item(cellBk).style.backgrou
ndColor = "transparent" ' SET CELL
BACKGROUND COLOR TRANSPARENT
END IF
END SUB
-->
</Script>
<script language="JavaScript"
type="text/JavaScript">
<!--
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.arg
uments; 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.l
ength) {
d=parent.frames[n.substring(p+1)].docume
nt; 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];}
}
//-->
</script>
</head>
<body background="tan_bg.jpg"
onLoad="MM_preloadImages('listening_room
_over.gif','home_over.gif')"">
<table width="192" border="0">
<tr>
<td ID="head0" ALIGN="left"
height="15"
ONCLICK="ShowHide(0)"><a
href="index.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home','','hom
e_over.gif',1)"><img src="home.gif"
alt="Home" name="Home" width="192"
height="26" border="0"></a></td>
</tr>
<td ID="head0" ALIGN="left" width="192"
height="15"
ONCLICK="ShowHide(0)"><table width="192"
border="0" align="left" cellpadding="0"
cellspacing="0">
<tr>
<td><a href="#"
onFocus="if(this.blur)this.blur()"
onMouseOver="MM_swapImage('Image1','','l
istening_room_over.gif',1)"
onMouseOut="MM_swapImgRestore()"><img
src="listening_room.gif" name="Image1"
width="192" height="24"
border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 1 -->
<div ID="Link0" CLASS="LINKSOFF">
<a href="listening.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Listening
Room</b></a><br>
<a href="audiolib.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Audio
Library</a><br>
<a href="thismoshow" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; This
Month's Show</a><br>
<a href="broadcastsched.shtml"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Broadcast
Schedule</a><br>
<a href="archives" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Archives</a><br>
</div>
</td>
</tr>
<tr>
<td ALIGN="left" valign="top"
CLASS="HEADING" ID="head1"
ONCLICK="ShowHide(1)"><table width="118"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img src="interchange.gif"
width="192" height="26"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 2 -->
<div ID="Link1" CLASS="LINKSOFF">
<a href="interchange.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Interchange</b></a><br>
<a href="survivallog.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Survival
Log</a><br>
<a href="contest.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Story
Contest</a><br>
<a href="hitchhikersforum.shtml"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Hitchhiker's
Forum</a><br>
</div>
</td>
</tr>
<tr>
<td ID="head2" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(2)"><table width="194"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img src="on_stage.gif"
width="192" height="24"></td>
</tr>
</table></td>
</tr>
<tr>
<td ALIGN="left"><!-- Menu 3 -->
<div ID="Link2" CLASS="LINKSOFF">
<a href="http://simplythebest.net"
CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>
On
Stage</b></a><br>
<a
href="http://simplythebest.net/shareware
.html" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Stage
Schedule</a><br>
<a
href="http://simplythebest.net/affiliate
s/" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Tour
Repertory</a><br>
<a href="http://simplythebest.net/shop/"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Play
Scripts</a><br>
<br>
</div>
</td>
</tr>
<tr>
<td ID="head3" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(3)"><img
src="gift_shop.gif" width="192"
height="24"></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 4 -->
<div ID="Link3" CLASS="LINKSOFF">
<a href="giftshop.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Gift
Shop</b></a><br>
<br>
</div>
</td>
</tr>
<tr>
<td ID="head4" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(4)"><img
src="membership.gif" width="192"
height="24"></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 5 -->
<div ID="Link4" CLASS="LINKSOFF">
<a href="members.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Membership</b></a>
<br>
<br>
</div>
</td>
</table>
</body>
</html>
thankyou soooo much anyone willing to look at this for me...
I have a script for a menu that slides down as each link is clicked on.....
there is a css file that sets the styles... and the original buttons were made with css...
I am in the process of modifying this menu...
I have added an image button to the top of the menu which has a rollover effect.....
on top of the main buttons to the menu, I have added an image.... and this works ...but.....
I would like to be able to have the same rollover effect on the other buttons.... like I have on the home button...
every time I try to do it... it breaks the script ( Im guessing here" and the menu doesnt work anymore....
here is the html for the menu... with script...
the images wont show... but you will know what is happening...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
<html>
<head>
<title>menu test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style>
<!--
a.nav:link {
font-family: Verdana, Arial,
"San Serif";
font-size: 10pt;
text-decoration: none;
font-weight: normal;
color: 644A25;
}
a.nav:visited {
font-family: Verdana, Arial,
"San Serif";
font-size: 10pt;
text-decoration: none;
color: #A85659;
}
a.nav:active { font-family:
Verdana,Arial,San Serif; font-size:
10pt; text-decoration: none }
a.nav:hover { font-family:
Verdana,Arial,San Serif; font-size:
10pt; text-decoration: none;
color: #359946 }
.HEADING { cursor: hand;
font-family: Verdana, Arial, "San
Serif"; font-size: 10pt; color:
#644A25; font-weight: normal;
border: 1 solid #E8E8D8}
.LINKSOFF { display: none;
font-family: Verdana,Arial,San Serif;
font-size: 10pt; color:
#359946 }
.LINKSON { display: inline;
font-family: Verdana, Arial, "San
Serif"; font-size: 10pt}
-->
</style>
<Script Language="VBscript">
// Copyright 2001 Stephen Hayes
(steve@obtsolutions.co.uk)
// OBT Solutions UK
(http://www.obtsolutions.co.uk)
// Permission granted to
SimplytheBest.net to feature script in
its
// DHTML script collection at
http://simplythebest.net/info/dhtml_scri
pts.html
<!--
Option Explicit
DIM menuID,menuObj,cellBk
SUB ShowHide(menuID)
menuObj = "Link" & menuID
cellbk = "Head" & menuID
// CHECK IF OPEN
if document.all.item(menuObj).className
= "LINKSON" then 'IF MENU OPEN THEN
CLOSE
document.all.item(menuObj).className =
"LINKSOFF"
document.all.item(cellBk).style.backgrou
ndColor = "transparent" ' SET CELL
BACKGROUND COLOR TRANSPARENT
ELSE
document.all.item(menuObj).className =
"LINKSON" ' OPEN MENU
document.all.item(cellBk).style.backgrou
ndColor = "transparent" ' SET CELL
BACKGROUND COLOR TRANSPARENT
END IF
END SUB
-->
</Script>
<script language="JavaScript"
type="text/JavaScript">
<!--
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.arg
uments; 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.l
ength) {
d=parent.frames[n.substring(p+1)].docume
nt; 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];}
}
//-->
</script>
</head>
<body background="tan_bg.jpg"
onLoad="MM_preloadImages('listening_room
_over.gif','home_over.gif')"">
<table width="192" border="0">
<tr>
<td ID="head0" ALIGN="left"
height="15"
ONCLICK="ShowHide(0)"><a
href="index.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home','','hom
e_over.gif',1)"><img src="home.gif"
alt="Home" name="Home" width="192"
height="26" border="0"></a></td>
</tr>
<td ID="head0" ALIGN="left" width="192"
height="15"
ONCLICK="ShowHide(0)"><table width="192"
border="0" align="left" cellpadding="0"
cellspacing="0">
<tr>
<td><a href="#"
onFocus="if(this.blur)this.blur()"
onMouseOver="MM_swapImage('Image1','','l
istening_room_over.gif',1)"
onMouseOut="MM_swapImgRestore()"><img
src="listening_room.gif" name="Image1"
width="192" height="24"
border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 1 -->
<div ID="Link0" CLASS="LINKSOFF">
<a href="listening.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Listening
Room</b></a><br>
<a href="audiolib.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Audio
Library</a><br>
<a href="thismoshow" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; This
Month's Show</a><br>
<a href="broadcastsched.shtml"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Broadcast
Schedule</a><br>
<a href="archives" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Archives</a><br>
</div>
</td>
</tr>
<tr>
<td ALIGN="left" valign="top"
CLASS="HEADING" ID="head1"
ONCLICK="ShowHide(1)"><table width="118"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img src="interchange.gif"
width="192" height="26"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 2 -->
<div ID="Link1" CLASS="LINKSOFF">
<a href="interchange.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Interchange</b></a><br>
<a href="survivallog.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Survival
Log</a><br>
<a href="contest.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Story
Contest</a><br>
<a href="hitchhikersforum.shtml"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Hitchhiker's
Forum</a><br>
</div>
</td>
</tr>
<tr>
<td ID="head2" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(2)"><table width="194"
border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img src="on_stage.gif"
width="192" height="24"></td>
</tr>
</table></td>
</tr>
<tr>
<td ALIGN="left"><!-- Menu 3 -->
<div ID="Link2" CLASS="LINKSOFF">
<a href="http://simplythebest.net"
CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>
On
Stage</b></a><br>
<a
href="http://simplythebest.net/shareware
.html" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Stage
Schedule</a><br>
<a
href="http://simplythebest.net/affiliate
s/" CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Tour
Repertory</a><br>
<a href="http://simplythebest.net/shop/"
CLASS="nav"
onFocus="if(this.blur)this.blur()"> 
; Play
Scripts</a><br>
<br>
</div>
</td>
</tr>
<tr>
<td ID="head3" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(3)"><img
src="gift_shop.gif" width="192"
height="24"></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 4 -->
<div ID="Link3" CLASS="LINKSOFF">
<a href="giftshop.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Gift
Shop</b></a><br>
<br>
</div>
</td>
</tr>
<tr>
<td ID="head4" ALIGN="left"
CLASS="HEADING"
ONCLICK="ShowHide(4)"><img
src="membership.gif" width="192"
height="24"></td>
</tr>
<tr>
<td ALIGN="left">
<!-- Menu 5 -->
<div ID="Link4" CLASS="LINKSOFF">
<a href="members.shtml" CLASS="nav"
onFocus="if(this.blur)this.blur()"><b>&n
bsp; Membership</b></a>
<br>
<br>
</div>
</td>
</table>
</body>
</html>
thankyou soooo much anyone willing to look at this for me...