Image

0

Image Rollovers

Posted by admin - 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>
0

Precaching Images

Posted by admin - October 5, 2009

Javascript enabling scripts to load images into the browser’s memory cache without displaying the image, a technique called precaching images.

Precaching an image requires constructing an image object in memory:

var myImage = new Image(width, height);

parameters to the constructor function are the pixel width and height of the image.

Code:

<html>
 <head>
 <title>Image Object</title>
 <script type="text/javascript">
 var imageArray = new Array();
 imageArray['image1'] = new Image(100, 100);
 imageArray['image1'].src = "img1.gif";
 imageArray['image2'] = new Image(100, 100);
 imageArray['image2'].src = "img2.gif";
 imageArray['image3'] = new Image(100, 100);
 imageArray['image3'].src = "img3.gif";
 function loadImages(list)
 {
   var img = list.options[list.selectedIndex].value;
   document.thumb.src = imageArray[img].src;
 }
 </script>
 </head>
 <body>
 <h3>Image Object</h3>
 <img src="img1.gif" name="thumb" width="100" height="100" />
 <form>
 <select onchange="loadImages(this)">
 <option value="image1">Image 1</option>
 <option value="image2">Image 2</option>
 <option value="image3">Image 3</option>
 </select>
 </form>
 </body>
</html>