wstinnett — Fri, 26 May 2006 17:13:04 +0000

Darren,

Welcome to the forum. I am new as well. I went on the website http://www.echoecho.com/ and found a snippet of code that accomplishes what you are wanting.

First of all, right before the closing head and script tag put this piece of JavaScript:

2nd of all, put this onChange event handler in the select tag of each of your drop downs:

onChange="jump(this.form)

And finally, in the option tag put this:

value="what ever your URL is for that particular selection"

Make sure that the name attribute in the select tag stays the same for each of your drop downs and make sure it matches this line in the JS code in the head section:

ref=menu.~~select~~.options[menu.~~select~~.selectedIndex].value;

Let me know if this helps you out.

Thanks,
wstinnett

I might be a bit our of my depth here

caoh — Thu, 25 May 2006 12:41:40 +0000

Just to introduce myself first, I'm Darren - hello all

I am pretty much a novice web designer as I have learned all I know myself. I have a website for the company I work for caoh.org.uk and I am wanting to create an on-line directory. For this I have started to create a drop down menu. I have tried to put a hyperlink in this menu in order to pick the page you land on. This might not make much sense but I have pasted below what I have done so far. This might be the wrong way to do this but I would appreciate any help or advice on how I should be doing this. I haven't used this forum before either so if I am doing something wrong please let me know.

Many thanks all.

Home

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
</script>

LargePrint
NormalPrint
Collective Signpost Directory

Please find below our online Signpost directory. The information available below has been taken from all of the signpost directories created by Community Action on Health with the help from HealthWORKS and Newcastle City Council. You can search for and organisation, service or community group by the signpost Area, Name of the organisation or by the Category under which they are listed.

Area

East
Fawdon
Gosforth
Outer West
West

Name

Community Action on Health
East End Asylum Seekers
Lifeline
PALS
PROPS

Category

Drugs
Asylum Seekers
Health Services
Community Projects
GP Surgeries

If you have any queries about the above information or know of any amendments to the information we have then please contact me darren@caoh.org.uk

wstinnett — Tue, 23 May 2006 01:36:28 +0000

I tried it out and it works alot easier than the dropdown code I used initially.

Now can I build this like I have it in my screenshots above?

Thanks for the code. May I use it on my site and if so would you like for me to attribute the code to you in the comments? Let me know and I will be glad to.

wstinnett

Lord Maverick — Mon, 22 May 2006 23:41:12 +0000

I use layers for this. Try some like that (in closer layer - x.gif - transparance gif image 1x1):
=========================================

<html>
<head>
&lt;script language="JavaScript"&gt;
<!--
function mouseOverPopup (obj) {
	obj.style.backgroundColor='#74B3D3';
	obj.className='p_menu_on';
}

function mouseOutPopup (obj) {
	obj.style.backgroundColor='#fafafa'
	obj.className='p_menu';
}


function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.0
  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 && document.getElementById) x=document.getElementById(n); return x;
}

function P7_autoLayers() { //v1.2 by PVII
 var g,b,k,f,args=P7_autoLayers.arguments;
 var a = parseInt(args[0]);if(isNaN(a))a=0;
 if(!document.p7setc) {p7c=new Array();document.p7setc=true;
  for (var u=0;u<10;u++) {p7c[u] = new Array();}}
 for(k=0; k<p7c[a].length; k++) {
  if((g=MM_findObj(p7c[a][k]))!=null) {
   b=(document.layers)?g:g.style;b.visibility="hidden";}}
 for(k=1; k<args.length; k++) {
  if((g=MM_findObj(args[k])) != null) {
   b=(document.layers)?g:g.style;b.visibility="visible";f=false;
   for(j=0;j<p7c[a].length;j++) {
    if(args[k]==p7c[a][j]) {f=true;}}
  if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}
//-->
&lt;/script&gt;
<title>EXAMPLE MENU</title>
</head>
<body>
<table width=780 border=0 cellpadding=0 cellspacing=0>
	<tr>
		<td background="/images/mm_04.gif" width=521 height=16>
        	<a href="1.html"	onMouseOver="P7_autoLayers(0,'Closer')">First</a>&nbsp;|&nbsp;
	        <a href="2.html"	onMouseOver="P7_autoLayers(0,'l2','Closer')">Second</a>&nbsp;|&nbsp;
	        <a href="3.html"	onMouseOver="P7_autoLayers(0,'l3','Closer')">La la la</a>&nbsp;|&nbsp;
		</td>
	</tr>
</table>
<!-- divs start -->
      <div id="l2" style="position:absolute; width:99px; height:45px; z-index:8; left: 42px; top: 34px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              	<tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="21.html">21</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','l2_2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="22.html">22</a> >>></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="23.html">23</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l3" style="position:absolute; width:99px; height:45px; z-index:8; left: 103px; top: 34px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              	<tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="31.html">31</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="32.html">32</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','l3_3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="33.html">33</a> >>></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="34.html">34</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l2_2" style="position:absolute; width:99px; height:45px; z-index:8; left: 168px; top: 62px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              	<tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="221.html">221</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="222.html">222</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="223.html">223</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="224.html">224</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l3_3" style="position:absolute; width:99px; height:45px; z-index:8; left: 229px; top: 89px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              	<tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="331.html">331</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="332.html">332</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="Closer" style="position:absolute; width:585px; height:359px; z-index:1; left: 1px; top: 34px; visibility: hidden"><a href="#" onMouseOver="P7_autoLayers(0)"><img src="x.gif" width="100%" height="100%" border="0"></a></div>
<!-- divs end -->
</body>
</html>