Webpage Image And Link Sonification Note: During the evening "high web traffic" hours, this page will be slow loading, especially for original WebTV Classic browsers! Just be patient and let all the image and sounds files load. Let the webpage load monitor ("heartbeat"), on the right side of our status bars, slow to a pause, or better yet, show a "flatline", indicating the webpage is fully loaded. INTRODUCTION This is a simplistic demo about image and link sonification similar to the popular Beatnik webpage sonification, except that I use simple HTML code and javascript mouseOver(s) and onClick(s) that will work with all WebTV browsers, including the original Classic boxes that do not support the Beatnik Player! Webpage link and image sonification is a form of interactive sound feedback, like the sounds our web boxes make from keyboard input, to your viewers that encourages navigating and clicking thru the links and image objects on your webpage. Our WebTV new Classic and all Plus boxes have a special version of the Beatnik Music-Object and Beatnik Player installed. Note: I originally published this page with instructions for both PageBuilder and non-PageBuilder webpages. But, many of my friends said it was just too complicated, and too "gimicky", for practical use, especially beginning PageBuilders! So, I offer this revision for PageBuilder Advanced Editor webpages only. All procedures, and the source code shown by the source code viewer below, apply for use on PageBuilder Advanced Editor webpages! This document is a PageBuilder Script Method Advanced Editor webpage with an extended head tag for additional meta tags, scripts, and style code; but, you can use any of the advanced editing methods by substituting their comment tags for the script comment tags I use for my script method of PageBuilder Advanced Editor. I also made this tutorial in a PageBuilder Basic Editor webpage for beginning PageBuilders. My PB Basic Editor sonification tutorial uses the standard PageBuilder blue background style with all HTML and scripts entered in "Add text" boxes in the PB Basic Editor. The Basic Editor webpage content is identical to this webpage – I just C&P'd this webpage code into the Basic Editor "Add text" boxes, to show that image and link sonification can be done very easily! Beginning PageBuilders should be able to use my Basic Editor webpage source code to create their own sonified webpage – just customize the images and sounds as desired. Also, shortly I will publish a sonification demo on a non-PageBuilder webpage, probably at the WTV-Zone or TL/2, using a file manager system that will allow the demonstration of a real straight-foward coded webpage, with <!doctype> declaration, head tag with scripts, styles, and meta tags, with <base> tag for relative linking to files. The codes in this webpage do not contain Beatnik code. If you want to learn and use Beatnik webpage sonification, check out the the Beatnik tutorials, for the Beatnik Music-Object and source code to be used on your webpages. You must register with Beatnik to use their "Music-Object" on your webpage. The best Beatnik webpage demo for WebTV I know, is by my friend Jerry, aka WbWzrd@webtv.net, who uses Beatnik's built-in sound banks for his music keyboard synthesizer. Many WebTV PageBuilders are learning how to install the Beatnik codes and use Beatnik sounds in their webpages. Watch for their posts in many of the WebTV NG's! Stay tuned for more exciting webpage sonification using Beatnik techniques! Just remember that there is several hundred thousand original WebTV Classic browser users out there that cannot enjoy the sounds of Beatnik sonified webpages – which is the reason I published this demo as an alternative to using Beatnik sonification in your webpages! USE YOUR OWN WEBPAGE SOUND FILE STORAGE Most of the free webpage space providers no longer allows linking of sound files to WebTV PageBuilder webpages and email signatures! Upload all your sound files to your website sound storage folders and link from your own website. I have all the image and sound files in this tutorial linked from my Star Boulevard (TL/2) webste file manager. See the bottom of this webpage for more information on the Star Boulevard Transloader and website features. Folks, the good old days of freely linking to a free website provider for WebTV PageBuilder webpages and signature boxes are gone, due to the state of the internet economy today! Also, many of the website providers, like Geocities Plus, do not even allow linking from their premium (pay) upgrade websites! You have to use a pay webpage provider that allows linking, like our good friends at the WTV-Zone. The WTV-Zone was created by computer using experts and present and former Webbers for the purpose of providing computer and WebTV users with all the webpage support services they need. All Webbers should consider using the WTV-Zone for their external subscription webspace! Additional options and enhancement features are regularly being added to the Zone as fast as economicaly feasible, at a very attractive pricing schedule! Check out what the Zone has for you! I will move all my PageBuilder tutorials to the Zone as soon as I get my account set up with all the "bells and whistles", which will allow me to produce a better grade of tutorials for PageBuilders However, there are still many websites that allow linking to small sound files, like midis – search them out. Remember: if you must link, be sure that the website you link to allows linking and specificly and explicitly states that policy on the webpage. As an example: the Free4TV website's homepage says: "Linkable Midi". However, if a webpage does not specifically say linking is not allowed, that does not imply that it's OK to link to their sound files! When in doubt, email the webmaster to inquire if linking is allowed. As a common courtesy – a must if requested – you should email the website's webmaster or corporate staff and inform them of the URL of the website where you are linking from and the number of files linked! Webmasters sometimes request this info to monitor their maximum total linked bandwidth usage, while their server logs reveal total bandwidth usage at any given time. SONIFIED LINKS DEMO The links below are sonified. To test the various sounds associated with the links "onMouseOver" and "onClick" event handlers, Turn up your TV's volume, and first Mouseover (move highlight box) a link below and you will hear a sound effect, then click the link and you will hear another sound effect, before you move to the next link. Clock Tower/Cuckoo Clock, Reville/Aoo-Gah, Elephant/Shot, Boat/Sunk, Kitty/Big Cat, Richochets. OK, didn't you have fun clicking the links to hear the sounds? That's the purpose of webpage image and link sonification – to encourage a viewer to click the navigational links in your webpage in anticipation of the sounds and image rollovers! Now, let's do something practical by using a typical example of webpage link sonification. The following link to Richard's "Blue Fox Menu" webpage is an example of a real sonified navigational link that actually goes to another website, as described above, while playing sounds with the onMouseOver and onClick event handlers in the link <a> tag: The Marine midi and image used below is used by my good friend Richard, aka RFDowneyJr@webtv.net (Blue Fox), on his Blue Fox Menu website and WebTV email signature box. The "Semper Fidelis" midi, as well as other popular Marine music, is from the Marine Wives midi website. OK, I don't show much creativity here; but, you can arrange the sound and link words for relative background sound effects, and ironic or comical expressions. This same technique works on buttons and images. Use your creative talent to sonify your website for the entertainment of your visitors. Guide your webpage visitors through your webpage navigational links with interactive feedback of unique sounds associated with links and images! Study and practice with the source code I use in this webpage. You can make your own basic templates that you only need to add your personal.mid(i) or .wav(e) file URL's. As you noticed, with WebTV, my background music played until you moused over the first sonified link and then stopped. I used the background sound to illustrate this point: sonified links will terminate your embed background music, even if you have set it for continous looping. However; if your webpage viewer clicks any navigational link in your document and goes to another webpage to check it out, when the viewer returns to your webpage the background music will start again and play until another link sound stops it again! OK, no problem; surely you don't want background music distracting your webpage viewers from the interactive sound feedback! But, then again, how about using a "snappy" tune to entertain your viewers while your webpage sound and image files load? Now, there is another "quirk" you will see when you use an "onMouseOut" in a sonified image or text link immediately followed by another "in focus" link that has an "onMouseOver" event, that the WebTV "highlight box" will immediately jump to: the previous "onMouseOut" event will be cancelled and the "onMouseOver" event will be triggered after a very short time! What to do? Just be sure that all "onMouseOut" sonified links, followed closely (in focus on the page so the highlight box will jump to the next link) by "onMouseOver" sonified links, have very short sound effect files that will execute fully before the next link event's "onMouseOver" event is triggered! This problem only occurs with WebTV's "highlight box", which jumps from link-to-link, and is the WebTV equivalent of a computer's "mouse." A computer user can move the (mouse) curser off a link without moving to the next link! Also, you will see that "onClick" sound effects in navigational links work good the first time opened during a surfing session because of the long delay in loading the remote webpage. However; if the webpage has been visited, and is cached in RAM, you may not hear the "onClick" sound effect file completely if it's a very long sound effect! What to do? Just use very short sound effect files for the "onClick" event that will execute fully before the cached page is loaded from RAM. Consider these two WebTV functional "quirks" when you design your sonified webpages for WebTV viewers. Just switching some links around and changing the length of an event handler's sound effect file will correct the problem noted above. Remember, also: the problem effects noted above are even more pronounced with the new Classic and Plus boxes faster processors and memory – so I suggest you always use very short sound effect files for "onClick", "onMouseOver", and "onMouseOut" event handlers in image and text links!

IMAGE LINKS SONIFICATION DEMO Image link sonification has a more enjoyable interactve feedback on your webpage visitors than the simple sonified text links above. With sonified images you have a far wider choice of options. You can provide attention-grabbing mouseover sound effects, that makes your viewers want to click your navigational links in anticipation of the next sound. The sounds can be unique sounds associated with the image and the linked webpage content. You can really provide your viewers with an entertaining webpage with a little creative effort. The possibilities are virtually unlimited, except for the limitations of the WebTV browser, and are limited only by your creativity and expertise. The following images are real sonified navigational links. Mouseover the images for a sound, then click the images for another sound, and to go to the webpage represented by the image. The last image on the right is a simple javascript image rollover that has a different sound for each image. Mouseover the little wolf to hear a sound, then click the little wolf to see a large wolf image rollover and another sound appear, and you will go to my friend Janet's wolf webpage; then when you return to this webpage you will see that the little wolf image has "rolled" back into the box – an added "onMouseOut" event (handler). Note: Isn't that little wolf a darling little guy – he's the endangered Canadian Rain Forest Wolf, being driven out of his habitat into extinction by the logging industry! My friend Janet, aka pagosa@webtv.net, emailed me a story from CBS News about this animal being placed on the endangered animals list. The story had that little guy's image on the webpage, and I couldn't resist taking the image. Janet has the image on her wolves webpage. As shown above, both the image links and text links above are typically used with real navigatonal links, instead of the "javascript:void()" operator I used elsewhere in this document for demonstration purposes! The rollover script I used in the wolf image table cell is: <td width="204" height="204"> <!-- begin image rollover ­-> <a href="http://community-2.webtv.net/pagosa/THEWONDERSOFWOLVES/" onMouseOver="playSound(16)" onClick="document.wolfimg.src='http://www.transload.net/~jaxred/images/lrgwolf.jpg', playSound(17)" onMouseOut="document.wolfimg.src='http://www.transload.net/~jaxred/images/smlwolf.jpg'"> <img name="wolfimg" src="http://www.transload.net/~jaxred/images/smlwolf.jpg" width="200" height="200" alt="Wolf Images"></a> </td> <!-- end image rollover ­-> The image rollover is accomplished by switching the "src" of the displayed image in a "named" image tag to the "src" of the rollover image, then switching back to the original image – that's the key to rollover images. Javascript needs to know which image tag is the target for the rollover image, and which two images are to be used in the rollover. Here's how the code works: The image tag, named "wolfimg", initially contains the "http://www.transload.net/~jaxred/images/smlwolf.jpg" image and the onClick event handler changes the little wolf image to the large wolf image, by this code: "onClick="document.wolfimg.src='http://www.transload.net/~jaxred/images/lrgwolf.jpg'"", which loads the "http://www.transload.net/~jaxred/lrgwolf.jpg" image into the image tag named "wolfimg", replacing the "http://www.transload.net/~jaxred/smlwolf.jpg" image at the same location. The "onMouseOut" event handler restores the small wolf image with this code: "onMouseOut="document.wolfimg.src='http://www.transload.net/~jaxred/images/smlwolf.jpg'"", which changes the "src" of the image in the image tag to the "src" of the small wolf, thereby restoring the original image. I'm sure many of you are thinking why not use the "onMouseOut" event handler to roll a third image into the image box above? Sure, why not? Just use the third image "src" in place of the original image "src" I used in the example above. But, remember: you must preload the third image just as you did for the second image in the example above; ie, use a "1-pixel" square image tag near the top of your document, as explained below. The images above are laid out in a complex table, rather than in a <div> element using CSS-Positioning, because the old WTV Classic boxes do not support CSS! Pay particular attention to how this table is laid out! The last two images on the right are in table cells that use the "rowspan" attribute to span the two rows on the left. And, you have to also know how to begin and end the table rows (<tr>'s) – that's the key to complex table layouts! OK, my apologies to the scripting gurus for such a simplistic explanation of image swapping; but, it's a hard concept for beginning scripters to grasp. It's a very simple script shown above – learn to use this simple basic script tempate for all your image rollovers. This rollover script can be used (without the sonification, if desired) by making the image "onClick" event rollover shown in the script to occur "onMouseOver", and then restore the original image "onMouseOut" – this is typically the way a rollover link is used with button graphics. Learn the simple mechanics of rollovers and you'll never have problems writing a script! And, you will see many unnecessarily complex and bloated rollover scripts online and in the textbooks, that make the simple rollover "id" and/or "name" variables hard to understand! Use the very simplest scripts you can find! Just be sure you use unique image names (and/or id's) so javascript can find the images on the page. Another option for WTV PageBuilder webpage image sonification, recently discovered by experimentation by two Webbers, is to use a Flash image with the sound file embeded in the gif animation – which is essentially what Flash images are. As recently posted in the PageBuilder NG's (see below), PageBuilders can save Flash images in our scrapbooks by taking the image to an online imager and changing the file extension from ".swf" to ".gif"; which works because our scrapbook uploaders actually do "see" and accept the image as a gif image file. This trick only works with Flash images – if you try to save sound files in your PageBuilder scrapbook, by using .gif file extension changes to .mid and .wav files, PageBuilder will popup an alert saying an image (file) cannot be found! Our fellow Webbers, SPACEBEAGLE and OptiMod published posts in the PageBuilder NG's about saving .swf files as .gif files in our PageBuilder scrapbooks. I put this info in one of my image webpages, here. CSS STYLE IMAGE ROLLOVERS Ok; that's a pretty simple image rollover script above, that I preferred using over using a CSS style image swap, because this simple image swap will work with all WebTV browsers. The old Classic boxes do not support CSS image rollovers, because they involve DHTML code. WebTV CSS/DHTML support requires that all CSS positioning be done within the HTML <div> element. Current practice is to use floating inline stacked, nested divisions. The image swaps can be accomplished by two ways with CSS, using CSS positioning. Both methods use nested, stacked divisions containing images. One method switches the visibility of the stacked image divisions; while, the other method switches the z-index stacking order of the stacked image divisions. Pretty simple DHTML, which is HTML, JavaScript, and style code used together for providing dynamic webpage content; but, the scripts involved are beyond the scope of this tutorial. DHTML image swapping is a good subject for later procedural methods tutorials. If you're interested in this subject, check the JavaScript NG. Several of the javascript experts, are really good DHTML scripters, and have great DHTML demo webpages – check them out, if you're interested and know javascript. It's a fun way to advance your scripting skills! You can find more on this subject, and ask questons about JavaScript and DHTML in the JavaScript NG. The guys in that NG are doing some amazing things with our little "dumb" browsers! Here my browser is loaded down and very slow with the wav and image files I use in this demo, while the javascript experts are doing all sorts of neat DHTML tricks! And I wonder: how does their boxes easily do such processor/memory intensive tasks while I have very slow performance with this wav and image demo? Well, I guess it's because their DHTML demos are one short page at a time, while this demo has over 400KB of data loaded in RAM? In fact, I wonder how the old Classics, with only 2megs of RAM, handles this demo, especially in regards to initial loading time? I haven't had any feedback on that yet, as all my friends have Plus or new Classic boxes. YOU SHOULD ALWAYS PRELOAD IMAGES You should always transload your images to your webpage storage file folders. When images are loaded to other websites from our WebTV PageBuilder scrapbooks, it is "sooo slooow"; and many times the images will fail to load because our browser's HTTP header "request for image file transfer" times out! I deliberately made this a long document with 21 embed sound files and seven image files downloaded from another website file manager, so you can see the exasperating effect the long load time has on a viewer! The total size of the files I have embeded in this webpage is 365kb, just about the practical limit for single page documents with WebTV Plus boxes with the faster processors and 56k modems! But, you should always consider the old WebTV Classic boxes with the 28k modems, that sometimes run at 19-24kps, will take much longer to load a page as large this page. There's a limit to a surfer's patience loading large files you need to consider. Use your own judgment, test your page thoroughly and have friends preview your page. PRELOADING IMAGES You should always preload your rollover images so the image file will be in the viewer's browser cache (RAM) ready for display when called. With WebTV PageBuilder, you should use an <img> tag immedately after your new PB AE <body> tag, or immediately following your sound file embeds, with width and height attributes set to "1-pixel", which loads the image file into your browser's RAM ready to be loaded into the rollover image tag on the webpage. A javascript interpreter DOM register pointer tells javascript where to find the image file in the RAM cache. The "1-pixel x 1-pixel" image file tag does not display the image on your webpage; but, is effectively, and invisibly embed in your webpage, ready to be called by the rollover script! Here's the image preload code you should use for each of your rollover images, using the large wolf image in the example above: <img src="http://www.transload.net/~jaxred/images/lrgwolf.jpg" height="1" width="1"> This preloaded image file will be swapped for the small wolf image in the small wolf image tag in the webpage that has height and width attributes set to "200" x "200", which will make the rollover image the same size as the image it replaces. Now here's the only problem with using this "1-pixel square" method of preloading (embeding) your rollover images: high-quality TV screens and high-resolution computer monitors may show a very tiny, almost invisible "dot" in the upper left corner of this webpage on the screen where I embeded the preloaded image file immediately following the body tag as suggested in this tutorial. I have seen this tiny little dot on my TV screen in the upper left corner of this webpage, and you will too, above my title and adjacent to where the WebTV bug alert appears, if you are using an original WebTV Classic browser. That's no problem at all, considering that you must preload your rollover images so they are available in RAM cache to immediately roll into an image tag when called! OK? But, for those of you perfectionists who don't like the tiny dot showing, I used the following "work-around" image preload code: <div style="visibility: hidden;"> add your 1 x 1 pixel preload image tags here </div>; and the image files will be embeded in the webpage, but hidden from view! Remember, you must use the "visibility" style code in division elements, and the original Classic boxes do not support CSS! Note: After I posted the above info in the news:alt.pagebuilder.help NG, my friend William Andx, aka Pwilliamandx@webtv.net, infomed me that you can use image tag attributes for width and height set to zero ("0") to preload images without using the hidden division to avoid having the tiny "dot" appear on the screen! William's posted example is as follows: <img src="URL of image" width="0" height="0"> Thanks for the tip, William! I have always seen, and I'm sure you guys have too, the "1 x 1" pixel trick explained in many HTML books, and have been taught that the size attributes must be a positive integer. However, the "zero" value size attributes appear to work OK with WebTV to preload the rollover image. So, folks; use your own personal preference for your image preloading scripts! I imagine many of you with some knowledge of javascript are wondering why I don't use the "new image()" constructor to preload my images? You cannot use the javascript "new image()" constructor in a PageBuilder Basic Editor editing screen! You have to use the 1-pixel square image tag preload code I show above in a PageBuilder "Add text" box, because the PageBuilder program adds <a> tags around your preload script "src's" when you view your Basic Editor screen and publish your webpage! The added <a> tags kill your preload script. This effect occurs because of PageBuilder's software program, which automatically turns a URL, entered in an "Add text" box, into a hyperlink on your webpages (the same way our WebTV email servers do to URL's in our emails and NG posts)! You should always use image tag dimensions, not only to tell browsers what size to display your image on the webpage; but, to also allow the browser to load pages faster! Using dimension attributes in all image tags eliminates the necessity for the browser to read the image file, determine the image dimensions (H x W aspect ratio) to allocate space to the image before being able to draw the rest of the webpage content. I repeat: always use image dimensions in your image tags whether they are in same aspect ratio, or resizing an image. Because then your browser can just allocate space for the image and go on loading the rest of the webpage content while the image is loaded in the reserved space! This will shorten your webpage loading time considerably, especially if you have several images on the webpage. LEARN FROM SOURCE CODE I have more explanation on the codes for your webpage below; but, here's a brief summary of some key points you must learn for webpage link and image sonification. When you Look at this document's source code you can see the sequencial listing and numbering of the individual embeds in this document near the top of the webpage following the body tag. The embeded files are listed in the order they are coded in the HTML for the webpage – which is not really necessary; but. just makes it easy to keep track of where each sound is listed. The embeded files are stored in our browser's RAM in "embeds" array registers by our browser's javascript interpreters that map the various webpage document objects, such as: HTML tags, images, links, etc, in their own separate arrays. You must list and count your embeds array position numbers very precisely so you can be sure to call the correct sound effect embed for each specific link or image. If you have other embeds on the webpage, you must include them in the precise embed array order count as coded in the document's HTML. The 21 sound file embeds I have in this document for the sonified links, including the bgsound midi, are numbered [0] thru [20] in the embeds array. See how I appropriately call the required sound file array number for each set of links and images. The images and links call the "playSound(effect)" function and passes the embeds array number (sound file number) to the function as a parameter (effect), which is listed in the parenthesis (the function call operator which invokes a function) of the link function calls. Remember: count and number your webpage document embeds in the exact order they are coded in the HTML! However, once you have the embeds array successive order count correct, and know the correct embed number for each file, you can "call" any embed sound file you desire for use with any image or link location anywhere within the webpage.

SAMPLE CODE FOR YOUR WEBPAGE Following is an example of code for your webpage link sonification.The procedures used in this tutorial can only be used when you have an external website space provider that allows linking to sound files for WebTV PageBuilder webpages; because the WebTV PageBuilder scrapbook can store images, but cannot store sound files! This tutorial is a PageBuilder Script Method Advanced Editor webpage with an extended head tag containing scripts, CSS styles for custom bgcolor and link colors, additional meta tags, a relocated title tag, and a new body with transition code. Use the source code viewer at the bottom of this webpage to see the structure of the script comment tags that block out the PB built-in body tag so a new custom body can be added. For more information on the PB AE script method, check out my tutorial. In the code below; first is the suggested WebTV javascript bug alert, next is the short one-line javascript function, and last in the code is the link code that calls the sound effects. Use the code below as a basic template for your own webpage images and links sonification. Use and modify the code anyway you like. Typically; you would put the script function code and embeds in a text box at the top of your document, and place the links code anywhere desired in the body of the document. Place the embeded sound files code, and rollover image preload code at the top of your document so the files will be begin to be loaded first; because with our slow WebTV browser's processors and memory functional capacity, will have to be downloaded before your webpage content begins to appear. My suggested sonification code for your sonified image and links webpage, is: First use a WebTV javascript bug warning – the sonified links and image rollovers will not work without javascript working correctly in your browsers! <div align="center"> <font color="red"> <noframes> <limittext value="WebTV Javascript Bug Warning – Reload (Cmd-R)!"> </noframes> </font> </div> <br> <br> Note: The above bug alert uses the popular "noframes" tag method, and also uses the propretary WebTV "limittext" tag so that only WebTV browsers see the text between the noframes tags. Computer users with "frames-disabled" will not see the noframes tag content because the WTV bug is only for WebTV; and further, why flash a noframes bug alert visible to computers when this document is not a frameset webpage? Then, after your rollover image preload tags as explained above, add all your embed sound files near the top of the document, like this: <embed src="http://www.yourserver.com/username/foldername/filename.wav" hidden="true" autostart="false"> <embed src="http://www.yourserver.com/username/foldername/filename.wav" hidden="true" autostart="false"> ... etc. Then add this simple javascript function to call the various sounds you use for your sonified links, like this: <script language="javascript"> function playSound(effect) {document.embeds[effect].play();} </script> You should place this script at the top of your document with all your other scripts. But, it really doesn't matter, just so you write the function ahead of where it will be "called" in your document. Then code your links anywhere you want sonified links in your document; as an example, from the first four sonified links above, like this: <a href="http://www.yourserver.domain/username/folder/filename.html" onMouseOver="playSound(0)" onClick="playSound(1)">link name here</a> <a href="http://www.yourserver.domain/username/folder/filename.html" onMouseOver="playSound(2)" onClick="playSound(3)">another link here</a> ... etc. In the code above, the mouseover and onclick event handlers "call" the number of the sound file listed in the "playSound(?)" function call operator parenthesis. The sound files are sequentially numbererd in the embeds array according to how they are listed in the embeds HTML code. Note: Throughout this tutorial, I use the "javascript:void()" operator that you see in the source code for the sonified links in this demo. The "javascript:void()" operator surpresses the "href-seek" function of the <a> tag, but invokes the "onMouseOver" and "onClick" (and also "onMouseOut" if used) events in the dummy link. Typically, you would have real navigational links in the code above instead of the "javascript:void()" operator I used in the demo. Also, the above code could be used around images instead of the text link names, and would give a distintive sound associated with the image, when moused over or clicked – see the image sonification code example discussed above. USING COMMENT TAGS IN PAGEBUILDER JAVASCRIPT Now, here's a note about a "quirky" way PageBuilder handles javascript in our webpages. As many of you may notice, I did not use HTML comment tags (<!-- script text here // ­->) to hide my javascript in the extended head tag of this document! Why? Because PageBuilder does not support the HTML comment tags in javascript in PageBuilder "Add text" boxes, while the use of comment tags in style code is fully supported. I'm sure many of you will notice this deficiency, and assume I erronously left the comment tags to hide the script out; but, not so – that's the way it is with WebTV PageBuilder javascript! The problem is due to the fact that the PageBuilder program ignores the text between the comment tags inside the script tags in an "Add text" box and wll not embed the scripts in the Basic Editor screen and your webpage when published. However, you see many online C&P scripts and textbooks using the comment tags and extra returns, called whitespace; which allows scripts to be read easier. The "returns" causes the PageBuilder software program to add <br> tags in your scripts. Just remove the comment tags and all extra spaces and returns when you use the scripts in a WebTV PageBuilder webpage "Add text" box. And be aware of this upgrade problem: The WebTV 2.6.1 upgrade is far stricter on HTML and scripts and will no longer allow the use of added HTML tags to make scripts with comment tags and extra whitespace work in a PageBuilder text box! To be able to see their PB custom backgrounds and scripts work correctly, all PageBuilders will have to remove the added HTML tags, extra spaces and returns (whitespace) that add <br> tags in your scripts, and also remove the double body tags, for added custom backgrounds, they are currently using with the 2.5.5 and 2.6 upgrades, when they receive the 2.6.1 upgrade. The HTML comment tags serve a very important purpose in scripting, by allowing javascript enabled browsers and non-javascript browsers to "co-exist" when reading the same webpages – the comment tags hide script from old non-javascript browsers. Javascript enabled browsers know the text between the comment tags inside the script tags is javascript code; while non-javascript browsers ignore the script tags, and know to ignore the script text between the HTML comment tags, so javascript code isn't displayed as plain text on non-javascript browsers. Our WebTV browsers support this protocol; but, not in PageBuilder webpage editor "Add text" boxes! ABOUT STAR BOULEVARD TRANSLOADER (TL/2) As you will see when you view the source code for this document, I had to link to my TL/2 (Star Boulevard Transloader) website for the sound files for the sonification links in this document. Star Boulevard websites have always allowed linking to WebTV email signature boxes and PageBuilder webpages! I have 30meg of website space with a neat, password protected (if desired) file manager, and 15meg of email space that comes with my TL/2 subscription. I put up a minimum of $15.00 deposit, and pay (deduct against cash balance) only $0.01 (1’) per 100kb of transloaded data, including emails from outside servers. Seems like my cash balance will last forever, just transloading a few .mid and .wav files! But, I really used the Star Boulevard free transloader a lot for other website space, as many Webbers did, before we got WebTV PageBuilder and WebScissors. I have long supported Star Boulevard for the free transloader and support they gave to Webbers building webpages at Anglefire, Geocities, Tripod, and others before we got WebTV PageBuilder website space. When Star Boulevard had to suspend the free transloader earlier this year, I signed up for a pay subscription. I use it regularly for single file transloading because I have all my server folders "ftp" addys in a drop-down menu for quick access, so I don't have to type them in the transloader. TL/2 has other options that I haven't used much because I have other resources elsewhere. TL/2 supports PHP (v4.0) for advanced webpage scripting, SSI, Source Code Viewer, multi-file/folder website transloader, an Extract-PDF tool that converts PDF files, the W3C HTML Code Tidy Tool, Image Tool, WebTV Plus boxes video capture tool, free NG message boards, and a Zip/UnZip tool! I recently opened a WTV-Zone account, because most all my friends have accounts there, and I appreciate the Zone's support for Webbers! As soon as I get my Zone account set-up with all the "bells and whistles," I'll transfer most of my PageBuilder tutorials, and will be able to produce a higher quality of tutorials for a few special WebTV projects. I'm abandoning my Geocities GeoPlus premium account because they don't allow linking to WebTV. I personally think all Webbers should leave all the webpage providers, such as Angelfire, Tripod, and others that stopped linking even small midi files to WebTV, and open accounts at webpage space providers like the Zone and TL/2 that fully support WebTV! I know it's a real monumental task to move your websites for some of you guys with "mega" webpages; but, there's online tools that make moving lots of files easy! Webbers need to support only those who support WebTV! SUMMARY OK, folks, go with your own sonified webpages! This tutorial explains the basics; but, I couldn't possible cover all the problems you may encounter wth your own advanced webpages! The basic table template structure of the PageBuilder webpage editing program makes it very difficult to use any advanced editing method, because you must use several work-around procedures to overcome PageBuilder's built-in program procedures. And, there's many unknown problems you encounter when you try to do something new or different. So; you have to always have a determined, positive "can-do" attitude, be patient, try out your ideas by "trial-and-error", and try to understand each problem's cause-and-effect! That's the only way to learn all the nuances of PageBuilder – learn what you can and can't do. Well that's about it, folks! Good luck! Have fun with your webpage sonification! The possibilities are endless – limited only by your creativity, your expertise, and the amount of time you are willing to spend trying to learn! Please visit my friend Jerry's Beatnik website noted above, and check out the Beatnik webpage sonification tutorial for a more advanced use of webpage sonification! Thanks for visiting my website, folks! Have a nice day, my Webber friends! My best wishes to you, your families, friends, and neighbors!

JaxRed View the of this webpage with the Thunderstone© WebTV™ Source Code Viewer. Put a "Source Code" Viewer on your webpages. © 2000 The Weather Underground, Inc. Site Visitors Since 07/19/01 Thanks For Visiting My Site, Folks!