Uncle Jim's Web Designs: Rollover Change Image Play Sound

Uncle Jim's JavaScript Designs

Rollover Change Image Play Sound

Author: Jim Stiles

This multi-function script contains images swapping and playing of sounds on Mouseover

INSTALLATION INSTRUCTIONS

COPY - Insert Between Head Tags: <HEAD></HEAD>

<script type="text/JavaScript"><!--
/*
 _____________________________________
/ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ\
| Another JavaScript from Uncle Jim   |
| Feel free to copy, use and change   |
| this script as long as this part    |
| remains unchanged. You can visit    |
| my website at http://jdstiles.com   |
| for more scripts like this one.     |
| Created: 1996 Updated: 2006         |
\_____________________________________/
 ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ
*/
if (document.images) {
// Rollover images  
  home = new Image();
  home.src = "home.gif";
  home2 = new Image();
  home2.src = "home_on.gif";
  products = new Image();
  products.src = "products.gif";
  products2 = new Image();
  products2.src = "products_on.gif";
  download = new Image();
  download.src = "download.gif";
  download2 = new Image();
  download2.src = "download_on.gif";
  order = new Image();
  order.src = "order.gif";
  order2 = new Image();
  order2.src = "order_on.gif";
  contact = new Image();
  contact.src = "contact.gif";

contact2 = new Image();
  contact2.src = "contact_on.gif";
}
function OnImage(name) {
if (document.images) {
fullname = eval(name + "2");
document[name].src = fullname.src;
}}
function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete) {
document[name].src = fullname.src;
}}}
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.indexOf('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))){eval('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>

COPY - Insert Inside Body: <BODY></BODY>

<a href="http://jdstiles.com/jds.main_office.html" ONMOUSEOVER="OnImage('home');javascript:jsPlay('thewav');return true;" ONMOUSEOUT="OffImage('home');javascript:jsStop('thewav');return true;"><img name="home" src="home.gif" border="0"></a>
<a href="http://jdstiles.com/sets/" ONMOUSEOVER="OnImage('products');javascript:jsPlay('thewav2');return true;" ONMOUSEOUT="OffImage('products');javascript:jsStop('thewav2');return true;"><img name="products" src="products.gif" border="0"></a>
<a href="http://jdstiles.com/jds.main_office.html" ONMOUSEOVER="OnImage('download');javascript:jsPlay('thewav3');return true;" ONMOUSEOUT="OffImage('download');javascript:jsStop('thewav3');return true;"><img name="download" src="download.gif" border="0"></a>
<a href="http://jdstiles.com/sets/" ONMOUSEOVER="OnImage('order');javascript:jsPlay('thewav4');return true;" ONMOUSEOUT="OffImage('order');javascript:jsStop('thewav4');return true;"><img name="order" src="order.gif" border="0"></a>
<a href="http://jdstiles.com/java/feedback.html" ONMOUSEOVER="OnImage('contact');javascript:jsPlay('thewav5');return true;" ONMOUSEOUT="OffImage('contact');javascript:jsStop('thewav5');return true;"><img name="contact" src="contact.gif" border="0"></a><br><br>
<EMBED name="thewav" src="sound1.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0> 
<EMBED name="thewav2" src="sound2.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0> 
<EMBED name="thewav3" src="sound3.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0> 
<EMBED name="thewav4" src="sound4.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0> 
<EMBED name="thewav5" src="sound5.wav" autostart="false" mastersound hidden="true" volume=100 width=0 height=0><br><br>

Download script as zip file

Close This Window