Archive for October, 2009

1

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>
0

HTML Boxes

Posted by admin - October 2, 2009

Sometimes it’s useful to put your page content into boxes to make it easier for users to navigate your site.

Code:

<?php
 function boxStyles()
 {
?>
 <style type="text/css">
 .box
 {
   font-family:arial, verdana, sans-serif;
   font-size:x-small;
   background:#ccc;
 }
 .box_title
 {
   font-size:small;
   font-weight:bold;
   color:#fff;
   background:#777;
   padding:5px;
   text-align:center;
 }
 .box-content
 {
   background:#fff;
   padding:5px;
 }
 </style>
<?php
 }
 function start_box($title)
 {
?>
   <table class="box">
   <tr>
   <td class="box-title"><?=$title?></td>
   </tr>
   <tr>
   <td class="box-content">
<?php
 }
 function end_box()
 {
?>
   </td>
   </tr>
   </table>
<?php
 }
?>
<html>
 <head>
 <title>Html Boxes</title>
 <?php boxStyles(); ?>
 </head>
 <body>
 <div style="width:300px;">
 <?php start_box("Greece"); ?>
 Greece was the first area in Europe where advanced early civilizations emerged,
 beginning with the Minoan civilization in Crete
 and then the Mycenean civilization on the mainland...
 <?php end_box(); ?>
 </div>
 </body>
 </html>

Note: if you want several different colors of boxes you can create different CSS classes for the colors.

Previous Page