|
|
Original Dropdown
by Steve Tonks
Original Dropdown
Template
(Download)
Original
Dropdown Tutorial
I've
thought about the easiest way to do this tutorial, and have figured
that taking it line by line and having you build it from scratch, is
the best way as apposed to giving you a hand by hand Download this, and
give you lines of stuff you might not know. And its a bit
easier if you are looking at the regular text as apposed to, me point
out stuff. The instructions each are numbered and kept nice
and neat.
1) Load up a
new document in your text editor
Use a text editor ONLY. That is programs like
Notepad and Simple text that do not add anything to the text.
Do no not use a word processsor like MS Word, or Corel Word Perfect.
2)Copy the intro of the script.
this
section deals with everything from the credits of the drop
down as well as the first part of the Java Script.
//lines
starting with two slashes are comments/instructions
//Keenspace dropdown developed by Steve Tonks, modified for educational
use by Scott Maddix
// Web Site: gear.keenspace.com
//This code is freely distributable but is prohibited from being resold
for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//IMG SRC URL should point to the absolute URL of the dropdown graphic
//The HREF tag should show where clicking on the image should take you,
//usually to a sign-up spot |
3)Edit
the script so that your dropdown's picture and link are present.
In this
section of the code there are two section in which you will need to
edit to present your image and link. These sections are in
Red. You need to include the full URL's for both the image
and the link to your dropdowns's homepage or forum.
document.writeln('<FORM"
SIZE="500"><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD
align="center"><FORM><A
HREF="YOUR
DROPDOWN HOMEPAGE URL"><IMG
SRC="PICTURE URL"
border=0>');
document.writeln('<TR><TD
align="center"><SELECT NAME="selectName"
onChange="goto_URL(this.form.selectName)">');
//If nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the
character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these |
The sections
in red are where you should replace the script with your own
information. Do not change anything but what is in
red. Here's an example.
document.writeln('<FORM"
SIZE="500"><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD
align="center"><FORM><A
HREF="http://decypher.keenspace.com/keendrop/index.htm"><IMG
SRC="http://decypher.keenspace.com/keendrop/keendroplogo.jpg"
border=0>');
document.writeln('<TR><TD
align="center"><SELECT NAME="selectName"
onChange="goto_URL(this.form.selectName)">'); |
4) Create the header entry for
your dropdown.
in the next
section of your script you will need to create the header in your
dropdown. That is the first option entry or what the dropdown
will say when you first load up the page. Again only change
what is in red.
//If
nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the
character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these
document.write('<OPTION VALUE="">YOUR
DROP DOWN TITLE<\/OPTION>');
document.write('<OPTION
VALUE="">-----<\/OPTION>'); |
For
continuity sake here again is an example
//If
nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the
character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these
document.write('<OPTION VALUE="">Keenspace
Dropdown Directory<\/OPTION>');
document.write('<OPTION
VALUE="">-----<\/OPTION>'); |
5) create
the lines for each one of the comics present on your dropdown
Now in this
section things change a little bit. The code below shows
example code for two comics. but you will probably want more
than that. you will notice everything in the two lines are
identical. except the parts in red. you can copy
this snippet of code and use it list -EACH- comic you want listed.
remember to change the title and urls to match each comic on your
dropdown.
document.write('<OPTION
VALUE="WEBCOMIC
1 URL">WEBCOMIC 1
Title<\/OPTION>');
document.write('<OPTION VALUE="WEBCOMIC 2
URL">WEBCOMIC
2
TITLE<\/OPTION>'); |
here's an
example.
document.write('<OPTION
VALUE="http://decypher.keenspace.com">Decypher<\/OPTION>');
document.write('<OPTION VALUE="http://orion.keenspace.com">Beyond Reality<\/OPTION>');
document.write('<OPTION VALUE="http://pele.keenspace.com">Deity
Permit<\/OPTION>');
document.write('<OPTION VALUE="http://angrymonkey.keenspace.com">Angry
D. Monkey<\/OPTION>');
document.write('<OPTION VALUE="http://pimpette.keenspace.com">Pimpette
and Associates<\/OPTION>'); |
6)
Finish this up with the last bit of code.
Now that you
are almost done there's only the last bit of code. One is to
show people where you got the code to do this (and to give props to the
dropdown directory) and the last is to close the script.
document.write('<OPTION
VALUE="">-----<\/OPTION>');
document.write('<OPTION
VALUE="http://decypher.keenspace.com/keendrop/">Dropdown
Directory 3.0<\/OPTION>');
document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>'); |
7) And
thats all. Just close and save.
next you'll
need to save this text document as dropdown.js The dropdown can be what
ever you want it to be, I just use that for simplicities sake.
8) upload it
to your keenspace site.
once you ftp
your way into your keenspace site you can just upload the dropdown.js
file, into your public_html folder. I suggest making a new
directory called scripts and put the Js file in there. again so you
remember where it is on your keenspace site.
9)All thats
left, is to link it to your site.
You've
probably seen this little html tag around, specially if you are on
other dropdowns. but once your ready to spread this script
around, and link it to your site, just put this little code where every
you want it on your Index_template.html
<script
language="javascript"
SRC="http://mysite.keenspace.com/scripts/dropdown.js">
</SCRIPT> |
10)
Give yourself a pat on the back.
Your dropdown
should be done and once you upload your Index_template.html with the
new script tag, to your workspace folder on the keenspace ftp, and
trigger a manual update your dropdown should be set and ready to go.
If you messed up somewhere or just want to full script, that we made
today. I've included it below. all the things you
need to change are of course still in red.
//lines
starting with two slashes are comments/instructions
//Keenspace dropdown developed by Steve Tonks, modified for educational
use by Scott Maddix
// Web Site: gear.keenspace.com
//This code is freely distributable but is prohibited from being resold
for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//IMG SRC URL should point to the absolute URL of the dropdown graphic
//The HREF tag should show where clicking on the image should take you,
//usually to a sign-up spot
document.writeln('<FORM"
SIZE="500"><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD
align="center"><FORM><A
HREF="YOUR
DROPDOWN HOMEPAGE URL"><IMG
SRC="PICTURE URL"
border=0>');
document.writeln('<TR><TD
align="center"><SELECT NAME="selectName"
onChange="goto_URL(this.form.selectName)">');
//If nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the
character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these
//If
nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the
character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these
document.write('<OPTION VALUE="">YOUR
DROP DOWN TITLE<\/OPTION>');
document.write('<OPTION
VALUE="">-----<\/OPTION>');
document.write('<OPTION
VALUE="WEBCOMIC
1 URL">WEBCOMIC 1
Title<\/OPTION>');
document.write('<OPTION VALUE="WEBCOMIC 2
URL">WEBCOMIC
2
TITLE<\/OPTION>');
document.write('<OPTION
VALUE="">-----<\/OPTION>');
document.write('<OPTION
VALUE="http://decypher.keenspace.com/keendrop/">Dropdown
Directory 3.0<\/OPTION>');
document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');
|
Thank you for
reading this tutorial, and I hope that it helped you out.
Good luck on your dropdown, and I let us know how it goes...
|
|
