DNE Scan Buttonver 1.2 (JavaScript)

The DNE Scan Button is a JavaScript web additon which uses a common "mouse-over" event to change the selected GIF. The resultant code causes a bar-code picture to be "scanned". Full instructions, code examples, and *.gif's are offered free of charge. ".. pretty neat ... hun?"
This graphic points to an active DNE Scan Button on the Net.
[ Intro | Install | Zip Contents | Price | Support | Improvements | Credits | Home ]

Background:

A mouse-over event occurs when a mouse cursor is positioned over a particular GIF - creating an event. In this case, a black & white GIF is exchanged for a red & white GIF. Thus creating the illusion of scanning.

Two separate blocks of code need to go into your HTML document.
  1. JavaScript code goes between the < Head > and < /Head > tags at the top of your document.

  2. JavaScript code goes anywhere between the < BODY > and < /BODY > of the same document. This code is FRAMED to keep the graphic layers in line. I would suggest keeping this Table intact on your page. To place the DNE Scan Button on your page (in the most ascetic place) you can easily use tables.
Lastly, the bar-code graphic layers need to be placed (near) where they can be called from the HTML document. These graphics are included below.

The installation is simple and totally configurable - sort of.

Installation:

  1. Get the download now. Download it. Unzip it. Try it out for yourself.

  2. Look at the listings of both example files. Cut and paste the two different sections (described above) into your HTML document.

  3. Send me an e-mail message to keep up any new updates. And if you improve this little toy - how about sending me a copy so I can post it here.

The contents of the dne_scan.zip are as follows:

SCAN
....... index.htm (this file) Installation Intstructions for Scan Button.
example.htm Sample HTML DNE Scan Button. You can grab this file along with the pictures below and get it up and going right now. Copy the graphics in a directory named: bar in the same directory of the DNE Scan Button HTML file.
example.txt Text file version of "example.htm" which shows the placement of the javascript tags and code for the body of the document.
BAR
Graphic images
which are used
for the big scan
button
rdtop.gif
blbot1.gif
rdbot1.gif
rdmid.gif
rlmid.gif
blbotm.gif
blbot2.gif
rdbot2.gif
blbot.gif

....... example2.htm Sample HTML Smaller Scan Button. The images for this button are in a subdirectory called smalbar.
example2.txt Text file version of "example2.htm" which shows the placement of the javascript tags and code for the body of the document. Having example2.txt is really not needed except for viewing the code through the browser.
SMALBAR
Graphic images
which are used
for the smaller scan
button
wht_bot.gif
wht_mid.gif
red_bot.gif
red_mid.gif

Click here to download the dne_scan.zip in .zip format.

 

Price: Free. Although it would be nice to see your implementation of this. You COULD drop me a note and tell me (here).

Support:

Any problems you might have are probably due to browser compatibility issues. But if you get really stuck (you won't) e-mail the author. I might end-up pointing you to some other resource: vis. search with "mouse+over+javascript+how".

Improvements & Expansion:

There are some obvious improvements could be made to make the button load and execute faster. Distilling the entire picture down to two or three GIF's come to mind first off.

Offering other sizes of buttons would be an easy addition also as The code would not have to be changed - only the bar-graph slices. If I find there is any interest in this addition I'll get right on it and post those additions.

Credits:

I believe sometime around the middle of 1996 Dan, Donna, Nevar & myself were playing around with mouse-over stuff and the idea for this came up. It was only a year later when I gave it a try (being more comfortable with Photoshop and Java). At the time I remember scratching out the high-level algorithm for the structure along with pretty arrows and a flow chart. Credit goes to Dan, Donna, and Nevar of High Cotton Media Solutions (here) - I really don't know how much credit we should give them ... but, some is given.

Some of the code was taken from a mouse-over demo; the structure at least. Some variable names were not changed in order to credit the raw coders. Thanks.

The implementation is an interesting use (barcode) of mouse-over events. The "proof of theory" is {at least} creditable to myself - including the above mentioned credits. So if you make money off of this idea, consider contacting me for additions. (ps it won't cost you anything to try …cuz` it's FREE.) OK, "nuf" said: giving credit where credit is due.
E-Mail: jaco@donotenter.com
WWW: www.donotenter.com