|
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.jaxred.net/tl2/images/lrgwolf.jpg', playSound(17)" onMouseOut="document.wolfimg.src='http://www.jaxred.net/tl2/images/smlwolf.jpg'"> <img name="wolfimg" src="http://www.jaxred.net/tl2/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.jaxred.net/tl2/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.jaxred.net/tl2/images/lrgwolf.jpg'"", which loads the "http://www.jaxred.net/tl2/images/lrgwolf.jpg" image into the image tag named "wolfimg", replacing the "http://www.jaxred.net/tl2/images/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.jaxred.net/tl2/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. Note: this trick only works with WebTV - computers will not display the renamed Flash file.
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" WebTV LBB 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 as 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.jaxred.net/tl2/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. |
