tekkie7
08-26-2003, 03:02 PM
I have been to the javascripts.com site and looked at several scripts I am not sure where in the script to put in the images.
I have images of buttons. When the user clicks on the button I want submenus to appear. So how would I do this?
Here is the code I am currently using? How can I put in the images?
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=about.htm/mission>Menu link here</a><br>'
menu1[1]='<a href=tet.htm>Menu link here</a><br>'
menu1[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=catalog.htm>Menu link here</a><br>'
menu2[1]='<a href=test.htm>Menu link here</a><br>'
menu2[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=test.htm>Menu link here</a><br>'
menu3[1]='<a href=test.htm>Menu link here</a><br>'
menu3[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href=test.htm>Menu link here</a><br>'
menu4[1]='<a href=test.htm>Menu link here</a><br>'
menu4[2]='<a href=test.htm>Menu link here</a><br>'
</script>
<style>
<!--
.wrap1{
position:relative;
}
.wrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3{
z-index:100;
}
-->
</style>
Step 2: Insert the below code into the <body> section of your page where you wish the drop down link(s) to appear. If you had selected to generate more than one drop down menus, you'll see that each menu code is separated and indicated by comments. Once you've pasted the below code onto your page, you can decide where to place each menu simply by moving the code inside each commented block to the desired location in your page:
<script language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by http://www.dynamicdrive.com
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu2');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu2')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 3 ends here---------->
<!----------Menu 4 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu3');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu3')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 4 ends here---------->
Step 3: Finally, insert the below code at the end of the <body> section, right above the </body> tag:
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>
<div id=dropmenu3 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="4px"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu
}
</script>
I have images of buttons. When the user clicks on the button I want submenus to appear. So how would I do this?
Here is the code I am currently using? How can I put in the images?
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=about.htm/mission>Menu link here</a><br>'
menu1[1]='<a href=tet.htm>Menu link here</a><br>'
menu1[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=catalog.htm>Menu link here</a><br>'
menu2[1]='<a href=test.htm>Menu link here</a><br>'
menu2[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=test.htm>Menu link here</a><br>'
menu3[1]='<a href=test.htm>Menu link here</a><br>'
menu3[2]='<a href=test.htm>Menu link here</a><br>'
//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href=test.htm>Menu link here</a><br>'
menu4[1]='<a href=test.htm>Menu link here</a><br>'
menu4[2]='<a href=test.htm>Menu link here</a><br>'
</script>
<style>
<!--
.wrap1{
position:relative;
}
.wrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3{
z-index:100;
}
-->
</style>
Step 2: Insert the below code into the <body> section of your page where you wish the drop down link(s) to appear. If you had selected to generate more than one drop down menus, you'll see that each menu code is separated and indicated by comments. Once you've pasted the below code onto your page, you can decide where to place each menu simply by moving the code inside each commented block to the desired location in your page:
<script language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by http://www.dynamicdrive.com
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu2');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu2')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 3 ends here---------->
<!----------Menu 4 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu3');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu3')">Click here</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 4 ends here---------->
Step 3: Finally, insert the below code at the end of the <body> section, right above the </body> tag:
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>
<div id=dropmenu3 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="4px"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu
}
</script>