ITEMS COVERED: | MouseOver Sound Effect | Automatic Print Effect | Automatic Back and Forward Scripts |
1. MOUSEOVER SOUND EFFECT
|
| This is a really cool and fun JavaScript project you can customize for your own website. The effect we're going to create is to play a sound when a visitor passes the mouse over a particular image link. This could be a phone-ring for a telephone icon linking to a contact page, or whatever you want. Here's how it works. First, copy the main script on the right and place on your page. | <SCRIPT LANGUAGE="JavaScript">
var agt=navigator.userAgent.toLowerCase(); var is_major=parseInt(navigator.appVersion);
var is_minor=parseFloat(navigator.appVersion); var is_nav=((agt.indexOf('mozilla')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.ind exOf('compatible')==-1) && (agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)); var is_ie=(agt.indexOf('msie')!=-1); if(is_ie){var agt_ie=agt.substring(agt.indexOf('msie')+5); is_major=parseInt(agt_ie); is_minor=parseFloat(agt_ie);} var is_dom2=(document.getElementById); function jsStop( o ) { if(is_ie&&is_major>=4&&eval('document.'+o)){var e=eval('document.'+o);if(e.src&&e.src!=''&&e.ReadyState&&e.ReadyState>=4){e. stop();}}else{if(is_nav&&is_major>=3&&(is_major<4||eval('document.'+o))){eva l('document.'+o+'.stop()');}} } function jsPlay( o ) { if(is_ie&&is_major>=4&&eval('document.'+o)){var e=eval('document.'+o);if(e.src&&e.src!=''&&e.ReadyState&&e.ReadyState>=4){if (is_major>=5){e.play();}else{e.run();}}}else{if(is_nav&&is_major>=3&&(is_major <4||eval('document.'+o))){eval('document.'+o+'.play(false)');}} } </SCRIPT> |
| Now use the code on the right for the actual link location, image and sound files you are going to use. Of course, you'll have to alter the code for your own image (image.gif) and sound files (welcome.wav), as well as the link URL. Now when a mouse goes over your image, the sound will play! By the way, if you're looking for terrific free sound clips, try this site: www.freeaudioclips.com
| <A HREF="http://pattayacitythailand.com" onMouseOver="javascript:jsPlay('thewav');return true" onMouseOut="javascript:jsStop('thewav');return true"><IMG SRC="image.gif" ALT="" WIDTH=200 HEIGHT=200 BORDER=0></A> <EMBED name="thewav" src="welcome.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0></EMBED> |
2. AUTOMATIC PRINT EFFECT
|
| This is a super-easy little script that you can use to form an automatic print-page link on your site. Just insert this code where you want the link to display and your visitors can choose to print the page they are viewing. Works as a nifty little script as well as a reminder to print the page! You might want to add a printer icon for a graphical display. | <a href='javascript:;' onClick='window.print();return false'>Print this page.</a> Print this page. |
3. AUTOMATIC BACK AND FORWARD SCRIPT
|
| Here are a couple of handy little scripts that automatically send your users back or forward to previously visited pages. This is a handy feature for catalogues, archives or photo albums, where hard-coding back and forward motion can be problematic. Here they are: | <a href="javascript:history.back(1)">Go Back</a>
<a href="javascript:history.forward(1)">Go Forward</a>
|
