Home > Uncategorized > An alternative way to do rollovers in javascript

An alternative way to do rollovers in javascript

Ok, this is more web design than .NET development, but I thought I’d share this tip. If you’re like me, you hate working with the highly complex table structure that gets generated when you press "Save for the web" in photoshop. You end up with little fine white lines cropping up between cells and ruining the look of your site.

Generally, when you have a button placed upon a background, you have to cut the image up into table cells, and then use an onMouseOver / onMouseOut attributes on the image to provide the rollover effect. But if you have 20 buttons on an image, placed irregularly on a background image, you end up with having to cut out 50 or so different cells with image fragments. And then it all becomes messy.

What I propose to to use a background image, and trap mouse movements over that image. when it falls within a particular window ie 20,20 to 30,30 – It overlays another image on top, providing a rollover effect (* Actually more of a ‘Hover’ effect, but quite similar), without having to cut up the image.

To give a sample of the javascript:

<script language="JavaScript">

var intRollovers = 2; 
var intSx = new Array; // start x (left)
var intEx = new Array; // end x (right)
var intSy = new Array; // start y (top)
var intEy = new Array; // end y (bottom)
var strImage =new Array; // Rollover image
var strLink =new Array; // hyperlink
var imgCache = new Array;

intSx[1]=224;intEx[1]=296;intSy[1]=88;intEy[1]=106;strImage[1]="ZoneDesign/HomeOn.gif";   strLink[1]="default.aspx";

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
if (!IE) document.captureEvents(Event.MOUSEDOWN)
document.onmousemove = getMouseXY;
document.onmousedown = getMouseXY;

function getMouseXY(e)
{
 if (IE)
 {
  tempX = event.clientX + document.body.scrollLeft;
  tempY = event.clientY + document.body.scrollTop;
 }
 else
 { 
  tempX = e.pageX;
  tempY = e.pageY;
 }   
 document.all["imgRollover"].style.display="none";
 for(i=1;i<intRollovers;i++)
 {
  if (tempX>intSx[i] &&
   tempX<intEx[i] &&
   tempY>intSy[i] &&
   tempY<intEy[i])
  {  
   document.all["imgRollover"].style.display="none";
   document.all["imgRollover"].style.left = intSx[i];
   document.all["imgRollover"].style.top = intSy[i];
   document.all["imgRollover"].src=strImage[i];
   document.all["imgRollover"].onload = unHideImage;   
   if ((IE && event.button == 1) || (!IE && e.which == 2))
   {
    window.location.href=strLink[i];
   }
   break;   
  }
 } 
 return true;
}

function unHideImage()
{
 document.all["imgRollover"].style.display="block";
}

</script>

Then include the following HTML after the body tag

<img id="imgRollover" style="position:absolute; display:none">

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: