Image Rollovers

calendar October 7, 2009

A favorite technique to add some pseudo-excitement is to swap button images as the user rolls the cursor atop them.The degree of change is largely matter of taste.The effect can be subtle-a slight highlight or glow around the edge of the image-or drastic-a radical change of color.Whatever your approach the scripting is the same.

Code:

<html>
 <head>
 <title>Image Rollovers</title>
 <script type="text/javascript">
 if(document.images)
 {
   var offImage = new Array();
   offImage['play'] = new Image(80,30);
   offImage['stop'] = new Image(80,30);
   offImage['pause'] = new Image(80,30);
   offImage['rewind'] = new Image(80,30);
   offImage['play'].src = "images/playoff.png";
   offImage['stop'].src = "images/stopoff.png";
   offImage['pause'].src = "images/pauseoff.png";
   offImage['rewind'].src = "images/rewindoff.png";
   var onImage = new Array();
   onImage['play'] = new Image(80,30);
   onImage['stop'] = new Image(80,30);
   onImage['pause'] = new Image(80,30);
   onImage['rewind'] = new Image(80,30);
   onImage['play'].src = "images/playon.png";
   onImage['stop'].src = "images/stopon.png";
   onImage['pause'].src = "images/pauseon.png";
   onImage['rewind'].src = "images/rewindon.png";
 }
 function imageOn(imgName)
 {
   if(document.images)
   {
     document.images[imgName].src = onImage[imgName].src;
   }
 }
 function imageOff(imgName)
 {
   if(document.images)
   {
     document.images[imgName].src = offImage[imgName].src;
   }
 }
 function setMsg(msg)
 {
   window.status = msg;
   return true;
 }
 </script>
 </head>
 <body>
 <form>
 Image Rollover
 <a onmouseover="imageOn('play'); return setMsg('Play the selected tune')"
 onmouseout="imageOff('play'); return setMsg('')">
 <img src="images/playoff.png" name="play" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('stop'); return setMsg('Stop the selected tune')"
 onmouseout="imageOff('stop'); return setMsg('')">
 <img src="images/stopoff.png" name="stop" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('pause'); return setMsg('Pause the selected tune')"
 onmouseout="imageOff('pause'); return setMsg('')">
 <img src="images/pauseoff.png" name="pause" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('rewind'); return setMsg('Rewind the selected tune')"
 onmouseout="imageOff('rewind'); return setMsg('')">
 <img src="images/rewindoff.png" name="rewind" width="80" height="30" border="0" />
 </a>
 </form>
 </body>
 </html>
admin Image

2 Responses to “Image Rollovers”

  1. JACKIE Says:
    September 5th, 2010 at 12:41 pm


    CheapTabletsOnline.Com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. High quality pills. Buy pills online…

    Buy:Petcam (Metacam) Oral Suspension.Prednisolone.Arimidex.Zovirax.Retin-A.Accutane.Mega Hoodia.Nexium.Lumigan.Prevacid.Human Growth Hormone.Synthroid.Zyban.Valtrex.100% Pure Okinawan Coral Calcium.Actos….

  2. RICK Says:
    September 7th, 2010 at 3:51 am


    CheapTabletsOnline.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. No prescription pills. Order drugs online…

    Buy:Synthroid.Accutane.Prevacid.Arimidex.Human Growth Hormone.100% Pure Okinawan Coral Calcium.Valtrex.Petcam (Metacam) Oral Suspension.Zyban.Mega Hoodia.Prednisolone.Retin-A.Zovirax.Actos.Lumigan.Nexium….

Leave a Reply

You must be logged in to post a comment.