Drop down menu w/ description using A HREF instead of FORM

[pickle965]

Drop down menu w/ description
http://www.dynamicdrive.com/dynamicindex1/combodescribe.htm

Hello all,

I'm in the process of designing a website for my friends band and the Drop down menu w/ description script is just what I was looking for except I need to replace the drop down list and "GO" button with A HREF link text. The problem is I don't know jack about Javascript and just ended up taking wild guesses at the code which didn't get me very far.

Here's my "form" code:


<form name="form1">
<input type="hidden" name="select1" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<a href="news.php" onClick="jumptolink(document.form1.select1)" target="mainiframe">News</a></p><a href="theband.htm" onClick="jumptolink(document.form1.select1)" target="mainiframe">The Band</a>
</form>


I'm sure there's plenty of things wrong with that. The website is located at http://pickle.dyndns.org/philosophiks. As you can see the form links actually work but the descriptions are coming up as undefined above the IFRAME in the orange header. The script portion of the code is at the bottom of the page as recommended and I left it untouched except for the description text. Before I started messing with the form and used the drop down the definitions worked normally, so I just need some help straightening my form code out...

Actually, if there was just a simple script that echoed an iframe page's title somewhere on the parent page I'd be happy with that too.

Thanks in advance,
EJ

[jscheuer1]

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
<a href="javascript:jumptolink(document.form1.select1)">Go</a><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

[pickle965]

Thanks for the reply John. I see you have the Go button converted to text but I am looking for a way to actually turn each individual drop down option into a seperate text link and get rid of the drop down completely. If that's in anyway possible please help me out.

[jscheuer1]

At that point, why not just write out each link in the usual manner:


<a href="some.htm">Some Page</a>

?

[pickle965]

Well, maybe I wasn't explaining my idea very well. I want to use it for the descriptions mainly. It's simply just to have the description pop up above the IFRAME whenever a link is visited while the page loads in the IFRAME.

Check this page out as an example: http://cyberworld.kicks-ass.net/philosophiks/index2.htm

When you select a different option in the drop down menu the text above the iframe changes. I just want the drop down to be invidual text links that change the description when they are clicked.

[jscheuer1]

I get it now, here is what I did:


<form name="form1">
<a href="http://www.javascriptkit.com" onmouseover="displaydesc(0, thetext1, 'textcontainer1');return true;">JavaScript Kit </a>
<a href="http://freewarejava.com" onmouseover="displaydesc(1, thetext1, 'textcontainer1');return true;">Freewarejava.com</a>
<a href="http://wired.com" target="newwin" onmouseover="displaydesc(2, thetext1, 'textcontainer1');return true;">Wired News</a>
<a href="http://www.news.com" onmouseover="displaydesc(3, thetext1, 'textcontainer1');return true;">News.com</a>
<a href="http://www.codingforums.com" target="newwin" onmouseover="displaydesc(4, thetext1, 'textcontainer1');return true;">Coding Forums</a>

<br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">Hi
</span>
</form>

From what you say, you would probably want to change 'onmouseover' to 'onclick'. There are a few other changes, change the displaydesc function to this (change in red):


function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which]
}

And, at the bottom of the script where it had:


displaydesc(document.form1.select1, thetext1, 'textcontainer1')

Do this:


displaydesc(0, thetext1, 'textcontainer1')

[pickle965]

Man, you are a true hero, that works perfectly. Thanks a million.