Entry Selector

[ Bloke.com || Linux || JavaScript || Java || Volleyball || Link Me ]
Free: [ Guestbook || MessageBot || Plugins || Counter || AusPrices || Advertise ]

Bloke > JavaScript > Entry Selector Example2

What do you think?

Entry Selector

The above example was created with just 7 lines of JavaScript!

    beginEntry();
    newEntry("This is Item 1");
    newEntry("This is Item 2");
    newEntry("This is Item 3");
    newEntry("This is Item 4");
    newEntry("This is Item 5");
    endEntry();

This page written with Java Script implements selection within a table. If you use it, I would appreciate (but not require) a link back to my home page. Thanks! See Also example 2 for more examples on you to use.

Netscape 3.0/MSIE 4.0 Required for this page to work.

Internal Functions

There are a number of functions available..

unload()/unload()

are functions you can call in

<BODY onUnload="unload()" onLoad="load()">

selectChange(index)

is the function called when a selection is made.

selectOut(index)/selectOver(index)

are called when the mouse move over of off the entry

How To

Include entryselector.txt in the HEAD section of you document.
Call the functions as shown in the above example.
You will need the files sel.gif, unsel.gif, oversel.gif to be in the current directory.
View the source of this document for an example.

Trouble?

Well sadly, the behaviour is not that well defined. If you are planning to use this script for proffesional or seious apps, I recommend you not use the Entry functions .. since generating HTML with javascript just doesn't work that well. So type out the code manually. Here is an exmaple;

<FORM name="imgform">
<TABLE border=3>
<TR><TD><IMG NAME=sel1 WIDTH=14 HEIGHT=14 SRC=unsel.gif></TD>
<TD><A onMouseOut="return selectOut(1);" onMouseOver="return selectOver(1);" href="javascript:selectChange(1)">This is Item 1</A></TD></TR>
<TR><TD><IMG NAME=sel2 WIDTH=14 HEIGHT=14 SRC=unsel.gif></TD>
<TD><A onMouseOut="return selectOut(2);" onMouseOver="return selectOver(2);" href="javascript:selectChange(2)">This is Item 2</A></TD></TR>
<TR><TD><IMG NAME=sel3 WIDTH=14 HEIGHT=14 SRC=unsel.gif></TD>
<TD><A onMouseOut="return selectOut(3);" onMouseOver="return selectOver(3);" href="javascript:selectChange(3)">This is Item 3</A></TD></TR>
</TABLE></FORM>

Got JavaScript questions? Maybe my JavaScript Board has the answers?

Cameron Gregory - cameron@bloke.com