Discriptive Links In Textarea Boxes

Click on any of the the below options

Options

T his is a really cool effect to impress your visitors with. It does not take up much room and yet it can be adapted to contain as many links as you want with a discription of each link before they visit the page.

W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms tested with no variations observed.

D epending on your knowledge of HTML and java scripts if you use the default number of links it is just a substitution of the default in a few places within the script. If you need more links, and to reconfigure the textarea box sizes this is where the solid background of HTML and java scripts really help. Since this is a highly configurative script we will first show you the default parts of the script and then where to make the reconfigurations to have it adapt to your site. There is a link at the bottom of the page to grab this code and add it to your site.

Default Head Section Of Script

<!--
//This is were you load the link Information for the URLs each link will go to
function go_to_station(){
        if (document.stationform.stationselect.options[0].selected){
                window.location.href = "http://www.bravenet.com";}
        else if (document.stationform.stationselect.options[1].selected)
        {       window.location.href = "http://www.notareallink.com";}
        else if (document.stationform.stationselect.options[2].selected)
        {       window.location.href = "http://www.notareallink.com";}
        else if (document.stationform.stationselect.options[3].selected)
        {       window.location.href = "http://www.notareallink.com";}
        return true;
        }

More Default Head Section Of Script

//This is were you load the Discription of the link and the site name
function textValue(){
        if (document.stationform.stationselect.options[0].selected){
                document.stationform.disc.value = "That would be - US! Bravenet.com, your friendly service provider!"
                document.stationform.author.value = "Bravenet.com";}
        else if (document.stationform.stationselect.options[1].selected)
        {       document.stationform.disc.value = "Bravenet now serves pizza! Ok, we're kidding :)"
                document.stationform.author.value = "Bravenet Pizza For Mia";}
        else if (document.stationform.stationselect.options[2].selected)
        {       document.stationform.disc.value = "Yah, right! You think we're goofy?
Don't answer that!"
                document.stationform.author.value = "Well, not here you won't :)";}

        else if (document.stationform.stationselect.options[3].selected)
        {       document.stationform.disc.value = "Every stop to think and forget to start again?"
                document.stationform.author.value = "Define Brad:";}
        return true;
        }

//-->

</script>

</head>

Default BODY Section Of Script

<form name="stationform">
  <div align="center"><center><p><select
name="stationselect" onChange="textValue()"
  multiple size="7">
    <option>Free Services </option>
    <option>Free Pizza! </option>
    <option>Win a CAR! </option>
    <option>Hey Brad! </option>
  </select><br>
  <textarea rows="1" cols="40" name="author"></textarea>
  Subject<br>
  <textarea rows="3" cols="40" name="disc" wrap="physical"></textarea> </p>
  </center></div><div align="center"><center><p><input type="button"
name="stationbutton"
  value="Go There>" onClick="go_to_station()"></p>
  </center></div>
</form>

Reconfigured Head Section Of Script

<!--
//This is were you load the link Information for the URLs each link will go to
function go_to_station(){
        if (document.stationform.stationselect.options[0].selected){
                window.location.href = "You Add Your Link URL Here";}
        else if (document.stationform.stationselect.options[1].selected)
        {       window.location.href = "You Add Your Link URL Here";}
        else if (document.stationform.stationselect.options[2].selected)
        {       window.location.href = "You Add Your Link URL Here";}
        else if (document.stationform.stationselect.options[3].selected)
        {       window.location.href = "You Add Your Link URL Here";}
      &;nbsp; return true;
        }

Note
For every additional link to be added use the below section of script and be sure it is above the line of script below.
return true;
}

Note
Be sure to number the links in numerical order, 0 1 2 3 4 etc.

T he below is for each additional link in the above <HEAD> section

else if (document.stationform.stationselect.options[4].selected)
{ window.location.href = "Your Next Link URL Here";}

If you notice the above word "else" is in every link but the first or top link in the above section of code. Be sure it stays as such. The word else has to be in every section but the first one.

More Reconfigured Head Section Of Script

//This is were you load the Discription of the link and the site name
function textValue(){
        if (document.stationform.stationselect.options[0].selected){
                document.stationform.disc.value = "Add Your Link Discription Here."
                document.stationform.author.value = "Bravenet.com";}
        else if (document.stationform.stationselect.options[1].selected)
        {       document.stationform.disc.value = "Add Another Link Discription Here Also"
                document.stationform.author.value = "Bravenet Pizza;For;Mia";}
        else if (document.stationform.stationselect.options[2].selected)
        {       document.stationform.disc.value = "These Link discriptions Can Be As Long As You Need Them To Be"
                document.stationform.author.value = "Well, not here you won't :)";}

        else if (document.stationform.stationselect.options[3].selected)
        {       document.stationform.disc.value = "These Link Discriptions Will Be Seen In The Bottom Textarea Box Under The Word Subject"
                document.stationform.author.value = "Define Brad:";}
        return true;
        }

//-->

</script>

</head>

Note
For every additional link to be added use the below section of script and be sure it is above the line of script below.
return true;
}

Be sure to number the links in numerical order, 0 1 2 3 4 etc.

The below is for each additional discription in the above <HEAD> section.

        else if (document.stationform.stationselect.options[4].selected)
        {       document.stationform.disc.value = "Add Another Discription Here.
Don't Forget To Also Change The Number [ ? ] Sequence"
                document.stationform.author.value = "Add Your Saying Here Also. Will Be Seen In Middle Textarea Box";}

I f you notice the above word "else" is in every link but the first or top link in the above section of code. Be sure it stays as such. The word else has to be in every section but the first one.

Reconfigured BODY Section Of Script

<form name="stationform">
  <div align="center"><center><p><select
name="stationselect" onChange="textValue()"
  multiple size="7">
    <option>Add Your Link Name here </option>
    <option>Add Your Link Name Here </option>
    <option>Add Your Link Name Here </option>
    <option>Will Be Seen In Top Textarea Box </option>
  </select><br>
  <textarea rows="1" cols="40" name="author"></textarea>
  Subject<br>
  <textarea rows="3" cols="40" name="disc" wrap="physical"></textarea> </p>
  </center></div><div align="center"><center><p><input type="button"
name="stationbutton"
  value="Go There>" onClick="go_to_station()"></p>
  </center></div>
</form>

T o add more "Option" choices to the script, just add the below line of script just before
</select><br>

Add The Below For Each New Option You Want.

O n some final notes that you can also do to alter the size of the textarea boxes and to have them scroll if you so choose. All these reconfigurations are within the <BODY> section of the script.

multiple size="7">

T he above is the configuration for how many "Options" you will have visible (without scrolling) in the top textarea box or as it is called within the code the Options. The default is set for 7 and with less than 7 "Options" it will show all and it will not scroll. We have reconfigured it to the number 4 and it will show 4 "Options" and scroll to view the others. This is very handy if you have many links and not that much space to show all without the scrolling feature.

<textarea rows="1" cols="40" name="author"></textarea><br>
Subject

T he above is the middle or as it is referred to within the script, the "author' textarea box. It defaults at 1 row (how many lines shown up and down) and 40 cols (columns). Columns run across. We have left the "rows" as is and altered the "cols" to 45 to allow more space to fit out text.

Subject<br>
<textarea rows="3" cols="40" name="disc" wrap="physical"></textarea> </p>

A bove is the same type of senario as the "author" textarea box except this is the "disc or "discription" textarea box. The only differences again being that the cols defaults at 40 and the "rows" defaulted at 3 We reconfigured it to show cols=45 and left the "rows" as is.

S ome java scripts make use of the ' while other scripts make use of the " within their scripts. Java scripts are "Very" sensitive to these characters within the script. This script makes use of the ". So if you would like to put the "quote signs" around any of the messages within the script quotes you must write it as such otherwise you will get "Error" messages pop up and get you totally frustrated.

(document.stationform.stationselect.options[1].selected)
{ document.stationform.disc.value = "Welcome To \"The Consigliere's™\" Web Design"
document.stationform.author.value = "Home Of \"Web Designing\" And More"

T his runs true anywhere with in this script that you add your text and want to close it in quotes within the quotes that come with the script. Do not get alarmed by adding the extra character of \". It will not show up on your page. It just tells the script to add it and not to be in error. If the script makes use of the single ' which this script does not, you do the same with a single ' quotes character such as The Consigliere \'s™ Web Design.

T he instructions may seem to get a little confusing but actually we put this script together in about 30 minutes with all the reconfigurations. Just remember to take your time and do one step at a time so as not to get lost or confused with it. If you would like to add this effect to your pages, just grab the below link and you are there. If you do have any problems with this feel free to contact us.
[ Get Code Here ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.